CODEWITHSUNDEEP
htmlcssformsfocus
mobis
mobis

Reputation: 143

Apply focus style to submit input button

I got an issue in my css code. The style does not apply to my submit button but to the search-field on focus.

See my code and screenshot below.

What is wrong?

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="Suche" 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=""></input>
</form>

enter image description here

Upvotes: 0

Views: 1116

Answers (3)

Hrishabh Singh
Hrishabh Singh

Reputation: 102

I think this is best solution

<form class="search-form">
  <input class="search-field" type="text" placeholder="Search" />
  <button class="search-submit" ><i class="fa fa-search"></i></button>
</form>

  <style>
.search-form .search-field {
  height: 10px;
  width: 112px;
  border: 1px solid #e4e4e4;
  padding: 10px 30px 10px 12px;
  border-right: none;
}

.search-form .search-submit {
  position: absolute;
  height: 32px;
  border: 1px solid #e4e4e4;
  background:none;
  border-left: none;
}
.search-form .search-field:focus ,.search-form .search-field:focus +  .search-submit  {
  border-color: #A5E7D6 !important;
  outline: none;
}
</style>

Upvotes: 1

user7596260
user7596260

Reputation:

Remove the (+) operator from the css code. It will work fine.

.search-form .search-field:focus .search-form .search-submit {

 border-right: 1px solid #A5E7D6;
    border-top: 1px solid #A5E7D6;
    border-bottom: 1px solid #A5E7D6;

}

Upvotes: 0

Manish Patel
Manish Patel

Reputation: 3674

You css was correct just change in this: .search-form .search-field:focus + .search-submit

.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;
  border-right: none;
}

.search-form .search-submit {
  position: absolute;
  height: 32px;
  border-right: 1px solid #e4e4e4;
  border-top: 1px solid #e4e4e4;
  border-bottom: 1px solid #e4e4e4;
  background:transparent;
  border-left: none;
}

.search-form .search-field:focus {
  border: 1px solid #A5E7D6;
  outline: none;
  border-right: none;
}

.search-form .search-field:focus +  .search-submit {
  border-right: 1px solid #A5E7D6;
  border-top: 1px solid #A5E7D6;
  border-bottom: 1px solid #A5E7D6;
  border-left: none;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<form class="search-form">
  <input class="search-field" type="text" placeholder="Search" />
  <button class="search-submit" ><i class="fa fa-search"></i></button>
</form>

Upvotes: 1

Related Questions