HTML搜索元素样式

Question

我正在尝试与按钮一起构建搜索元素，例如：

除了我需要更改搜索图标的背景颜色（蓝色，灰色，等等......）。

到目前为止，这是我的代码和结果：

.searchWrap {
  position: absolute;
  border: thin solid #f2f2f2;
  border-radius: 5px;
  top: 5px;
  left: 5px;
}

.searchTerm {
  float: left;
  border-style: none;
  padding: 5px;
  height: 20px;
  outline: none;
}

.searchButton {
  right: -50px;
  width: 30px;
  height: 20px;
  border: 1px solid #f2f2f2;
  background: #f2f2f2;
  border-radius: 5px;
  text-align: center;
  color: #ccc;
  vertical-align: middle;
  cursor: pointer;
}

<div className="searchWrap">
  <input type="text" className="searchTerm" placeholder="Search..." />
  <button type="submit" className="searchButton">
          <Icon name='search' />
       </button>
</div>

BTW：我正在使用React。这是我到目前为止的结果：

外部边框是圆形的，好的，这就是我需要的，但是searchTerm和searchButton之间的分离也是圆形的，我需要一个普通的分隔符，例如：

帮助表示赞赏。

Answer 1

我在这里使用字体很棒，所以代码没有像你的截图那样间隔，但看起来你有自己的库，你正在使用对该图标做出反应而你的间距很好

您需要做的就是使用border-radius: 0 5px 5px 0来保持左侧边框不会变圆，并在border-left上指定.searchButton来绘制垂直线。我更改了边框颜色，使其更加突出，但您可以使用您想要的任何颜色。

＆＃13;

＆＃13;

*{margin:0;padding:0;}
.searchWrap {
  position: absolute;
  top: 5px;
  left: 5px;
}

.searchTerm {
  float: left;
  border-style: none;
  padding: 5px;
  height: 20px;
  outline: none;
  margin-left: 3px;
  border: thin solid #ddd;
  border-width: thin 0 thin thin;
  border-radius: 5px 0 0 5px;
}

.searchButton {
  right: -50px;
  width: 30px;
  height: 32px;
  border: 1px solid #f2f2f2;
  background: #f2f2f2;
  border-radius: 0 5px 5px 0;
  text-align: center;
  color: #ccc;
  vertical-align: middle;
  cursor: pointer;
  border: thin solid #ddd;
}

.searchTerm:focus, .searchTerm:focus + .searchButton {
  border-color: red;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="searchWrap">
    <input type="text" class="searchTerm" placeholder="Search..." />
    <button type="submit" class="searchButton">
      <i class="fa fa-search"></i>
   </button>
 </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试使用搜索按钮css代替GET http://localhost:8080/api 404 (Not Found)

border-radius

Answer 3

你能使用bootstrap吗？相对简单，一旦你拥有它，就按照你想要的方式修改css。

https://v4-alpha.getbootstrap.com/components/input-group/#button-addons

Answer 4

强烈建议使用Bootstrap。见http://getbootstrap.com/components/#input-groups。加上FontAwesome，您可以这样做：

<div class="input-group">
  <input type="text" class="form-control" placeholder="Search for...">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <span class="fa fa-search"></span>
      <span class="sr-only">Search</span>
    </button>
  </span>
</div>