WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Need a big search form (5 posts)

  1. Dunkkan
    Member
    Posted 5 years ago #

    Hello,

    I've been browsing the net the last hours trying to search some tutorial on building a big search box, supported by several browsers. I've tried the usual CSS styles setting up the width and height, in a div great enough in my markup, but nothing seems to work in Firefox 3 nor IE7, and the default box is still there...

    I'd like to allow to a "notorious" typography being shown in the search box as the user types the key words... you know.

    Does someone knows how to do it ?

    Thanks very much.

  2. Darran
    Member
    Posted 5 years ago #

    There is no code to see what you are doing wrong. It would help if you showed what you did in your CSS and markup file.

  3. Dunkkan
    Member
    Posted 5 years ago #

    Hi Darran, sorry here it goes:

    #searchform {
    	width: 254px;
    	height: 54px
    	margin: 10px auto;
    	padding: 5px 3px;
    	text-align: center;
    	}
    
    #searchform #s {
    	width: 254px;
    	height: 54px
    	padding: 2px;
    	}
    
    #searchsubmit {
    	padding: 1px;
    	}

    The width reacts well, but there's no response from the height.

    Then :

    <form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
    <input id="s" type="text" onblur="if(this.value == '') {this.value = 'Search';}" onfocus="if(this.value == 'Search') {this.value = '';}" value="Search" name="s"/>
    <input type="submit" name="submit" value="Go" id="searchsubmit"/>
    </form>

    Maybe is impossible and every browser out there displays a standart line height which you cannot touch, but I remember have seen some search boxes quite big than the usual.

    Thanks to give it a look.

  4. Evita
    Member
    Posted 5 years ago #

    #searchform #s {
    	width: 254px;
    	height: 54px
    	padding: 2px;
    	}

    Above style (two IDs) is sometimes not working. Try instead only

    #s {
    	width: 254px;
    	height: 54px
    	padding: 2px;
    	}

    or

    #searchform input {
    	width: 254px;
    	height: 54px
    	padding: 2px;
    	}

    If it works, but your submit will also have the input style, then give it a class:

    <input class="button" type="submit" name="submit" value="Go" id="searchsubmit"/>
    #searchform .button {yourstyle}

    Hope this is helpful for you.

  5. Dunkkan
    Member
    Posted 5 years ago #

    Well Thanks ! all is working now. My problem was I was missing the comma after the height: 54px ; - we are under too much screen radiation I guess, at least me, I could be this night still changing pixels to an open attribut without any external view... I've set the styles for the button as well, and it's working like a charm. Thanks Evita for that feedback.

Topic Closed

This topic has been closed to new replies.

About this Topic