Support » Fixing WordPress » Change Search Button with CSS

  • Resolved jagreen


    Hey everyone! I’d really appreciate some help with this one:

    I’m trying to resize or just otherwise change the appearance of buttons in my theme, particularly the “search” button. I know the appearance of these buttons is being controlled somewhere in the theme (they all look the same, no matter what I do), and I thought it would be in my style.php, but I can’t find this line of code anywhere!

    I’ve spent so much time looking for what seems like a simple fix. Any ideas?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The way I personally do this is to give the search button an ID, so it is easier to style. This differs from theme to them, but generally works by opening searchform.php, and changing the code for the submit button to something like this:

    <input type="submit" id="searchsubmit" value="Search" />

    Then, it’s just a matter of styling the id #searchsubmit in your style.css. For example:

    #searchsubmit {
    background-color: #fff;
    color: #000;
    border: 1px solid #ff7700

    That sounds simple, but I’m not sure where to put the first code you listed. Here is my searchform.php:

    <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
    <?php if (strlen(get_search_query()) > 0) { ?>
    	<input type="text" onfocus="if (this.value == '<?php the_search_query(); ?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php the_search_query(); ?>';}" value="<?php the_search_query(); ?>" name="s" id="s" />
    <?php } else { ?>
    	<input type="text" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" value="Search" name="s" id="s" />
    <?php } ?>

    Looks like your search box already has an id of ‘s’, so you can put something like this in your style.css.

    #s {
    background-color: #fff;
    color: #000;
    border: 1px solid #ff7700

    That’s what I thought, too. When I tried the code you gave me initially, I put in #s in instead of something else (since it already has this id), and it didn’t change a thing. I tried it again just to be sure.

    Sorry to keep bringing this one up, and I appreciate the responses. Other ideas? Should I email the theme creator?

    Ah ha! I have an additional style sheet in my theme called “basic.css” and there was a code in there that was very specific with regard to the style of the button. Thanks for your help!

    Many thx
    I’ve been searching for it for hours
    thx again

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change Search Button with CSS’ is closed to new replies.