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

【问题标题】：Apply focus style to submit input button应用焦点样式提交输入按钮
【发布时间】：2017-09-04 12:16:45
【问题描述】：

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

【问题讨论】：

添加您的 html，以便我们可以全面了解您在做什么“错误”
@user3716569，最好的做法是将您的代码放在editingit 的原始帖子中。

标签： html css forms focus

【解决方案1】：

您的 css 是正确的，只需更改以下内容：.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>

【讨论】：

非常感谢。但不幸的是，它没有奏效。我可以请你看看我的页面吗？搜索表格在右上角。 stackoverflow.wedng.de

【解决方案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>

【讨论】：

【解决方案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;

}

【讨论】：