Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've tried for many hours to style my searchform. I managed to get it all done after some research. I even managed to get the text highlighted when on focus using javascript (no idea if there's a non-javascript solution as well). anyways, I've been googling around and trying out all sorts of things (e.g. playing around with the width when "onfocus" in my style.css) - nothing worked. I want a width autogrow for my searchform like in the Twenty Eleven Theme. Basically what I want is when you click on the input area the it will get a bit wider.

What I could find was this plugin which uses jquery. I don't know how to implement it, though. Is using jquery the only option I have? Can I get this effect via a different method?

I really tried a lot and searched around for hours, but couldn't find an answer, so I'd be happy for any kind of advice you can give me :)

Thanks a lot in advance!

share|improve this question
add comment

2 Answers 2

up vote 2 down vote accepted

they're using CSS3 transitions.

<style type="text/css">
#s {
    float: right;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;
    width: 72px;
}
#s:focus {
    background-color: #f9f9f9;
    width: 196px;
}
</style>

<input type="text" class="field" name="s" id="s" placeholder="Search">
share|improve this answer
    
Hey there :) Wow, so it's done with CSS after all. I'm glad to hear that. I copied the code above into the template, I also put the CSS additinally into the style.css of my theme. It doesn't take effect. Any idea what I'm doing wrong? Thanks so much for helping me! :) –  japanworm Sep 2 '11 at 16:40
1  
make sure you have the same id s on your search field and that there aren't other more specific css rules overriding it. a good tool for this stuff is chrome or safari's web inspector. right-click on any element and select 'inspect element' and you'll see all of the css rules being applied. –  Milo Sep 2 '11 at 16:46
    
I got it now, but it's messing up my searchbar. The magnifying glass graphic is suddenly in the middle of the search field. Very strange. Guess I have to play around with it a little. And thank you for the tip. I'm using Firefox's Firebug :) –  japanworm Sep 2 '11 at 16:49
    
I got it to work now. Thanks so much! :) –  japanworm Sep 2 '11 at 17:04
add comment

great!

edit the css as follow:

#q {
    float: right;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width, background;
    -webkit-transition-timing-function: ease;
    -moz-transition-duration: 400ms;
    -moz-transition-property: width, background;
    -moz-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width, background;
    -o-transition-timing-function: ease;
/* edit and add from here */
    width: 16px;
    color: transparent;
    border: none;
    background: #333333 url(/img/search.png) no-repeat;
}
#q:hover { cursor: pointer; } /* added line */
#q:focus {
    background-color: #f9f9f9;
    width: 196px;
/* edit from here */
    color: #333333;
    background-image: none;
}

and replace the icon url with an icon of your choice like, for example: http://glyphicons.com/ and you can get the same functionality everywhere!

And with this jQuery plugin ( http://andreaslagerkvist.com/jquery/live-search/#jquery-plugin-example ) you can add interactive search :D

share|improve this answer
    
I fail to see what is added here that Milo didn't say 18 months ago. Please elaborate on how this adds substance to this question. –  Johannes Pille Apr 6 '13 at 17:48
    
@johannes it adds a search button image just like in wordpress. when you click on the button it disappear and the input search field is shown –  Camaleo Apr 10 '13 at 6:59
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.