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>

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

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

Answer 1

我在这里使用了很棒的字体，所以代码的间距不像你的屏幕截图，但看起来你有自己的库，你正在使用该图标的反应并且你的间距很好。

您需要做的就是使用border-radius: 0 5px 5px 0来防止左侧边框四舍五入，并在.searchButton上指定一个border-left来绘制垂直线。 我更改了边框颜色，使其更加突出，但您可以使用任何您想要的颜色。

 *{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; }

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

Answer 2

试试这个搜索按钮 css 而不是border-radius

.searchButton {
    ...
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    ...
}

Answer 3

你可以使用引导程序吗？ 比较简单，一旦有了，就按照你想要的方式修改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>