应用焦点样式以提交输入按钮

Question

我的css代码中出现了问题。 该样式不适用于我的提交按钮，而是适用于焦点上的搜索字段。

请参阅下面的代码和屏幕截图。

有什么问题？

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>

Answer 1

你的css是正确的，只需更改：.search-form .search-field:focus + .search-submit

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为这是最佳解决方案

<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>

Answer 3

从css代码中删除（+）运算符。它会正常工作。

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

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

}