Having an issue with my CSS code. I can't get the style to apply to my submit button, but it works on the search field when focused.
Please review my code snippet and screenshot below.
What could be causing this problem?
CSS
.search-form .search-field {
height: 10px;
display: inline-block;
margin: 0;
width: 112px!important;
border: 1px solid #e4e4e4;
border-radius: 2px;
padding: 10px 30px 10px 12px;
}
.search-form .search-submit {
position: absolute;
height: 32px;
border-right: 1px solid #e4e4e4;
border-top: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
}
.search-form .search-field:focus {
border: 1px solid #A5E7D6;
}
.search-form .search-field:focus + .search-form .search-submit {
border-right: 1px solid #A5E7D6;
border-top: 1px solid #A5E7D6;
border-bottom: 1px solid #A5E7D6;
}
HTML / PHP
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
<label> <span class="screen-reader-text"><?php echo _x( 'Search for:', 'label' ) ?></span>
<input type="search" class="search-field" placeholder="Search" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" /> </label>
<input type="submit" class="search-submit" value="Submit"></input>
</form>