Support » Themes and Templates » Need a big search form

  • Resolved Dunkkan

    (@dunkkan)


    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • 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.

    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.

    #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.

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Need a big search form’ is closed to new replies.