0

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!

2

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">
  • 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
0

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

  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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