Search field in menu

Update: although I’m a total newbie when it comes to coding, I tried to do some of the groundwork myself. First, I uploaded a custom searchform.php file to the wp-content directory with the following code:

<?php
/**
 * Custom search form
 */
?>

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text"><?php echo _x( 'S&ouml;k efter:', 'label' ) ?></span>
        <input type="search" class="search-field"
            placeholder="<?php echo esc_attr_x( 'S&ouml;k …', 'placeholder' ) ?>"
            value="<?php echo get_search_query() ?>" name="s"
            title="<?php echo esc_attr_x( 'S&ouml;k efter:', 'label' ) ?>" />
    </label>
    <!-- <input type="submit" class="search-submit"
        value="<?php echo esc_attr_x( 'Search', 'submit button' ) ?>" /> -->
</form>

As you can see, this is just the default HTML5 search form, only with the “Submit” button taken out. Next, I substituted the copyright paragraph in header.php with the following:

<p><span style="display: inline-block; transform: rotate(45deg);">⚲</span> <?php get_search_form(); ?></p>

First a search symbol, then the actual search field – which I should now be able to style by way of the .search-form and .search-field classes in my style.css file, right?

And here’s where I run aground: I’ve added the two classes and tried to play around with them, but whatever I do the styling of the the search field doesn’t seem to change. What am I doing wrong?

• This reply was modified 6 years, 11 months ago by andrejslavik.

Hi @andrejslavik,

It difficult to tell for sure without seeing the site itself, but my guess would be that other styles are taking precendent before the ones you’re adding.

Try adding an !important to your style (like .search-field { border-color: red !important; }) and see if it takes effect. If it does, you need a higher specificity on your targeting (like .site-header .search-form .search-field).

— Anders