WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change Search Button with CSS (7 posts)

  1. jagreen
    Member
    Posted 4 years ago #

    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?

  2. soulsizzle
    Member
    Posted 4 years ago #

    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
  3. jagreen
    Member
    Posted 4 years ago #

    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 } ?>
    
    </form>
  4. soulsizzle
    Member
    Posted 4 years ago #

    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
    }
  5. jagreen
    Member
    Posted 4 years ago #

    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?

  6. jagreen
    Member
    Posted 4 years ago #

    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!

  7. demon36
    Member
    Posted 4 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Topic