搜索栏图标样式

Question

我有一个搜索文本字段。如何在搜索文本字段中放置另一个搜索图标？

喜欢这张图片中的一个：

我的文本字段中需要这个放大按钮（可以点击）

这是我的搜索字段：http://jsfiddle.net/ULtH4/

这是我的代码：

HTML：

<input type="text" name="search_people" placeholder="Search for people..."  class="search_container_textfield" size="30" value="" id="inputString"   />

CSS：

.search_container {
    background-color: #FFFFFF;
    width: 500px;
    border-radius:5px 5px 5px 5px;
    border:solid 1px #DFDFDF;
    padding:2px;
}

    .search_container_textfield {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-collapse: collapse;
        border-radius: 5px 5px 5px 5px;
        float: left;
        font-size: 13px;
        height: 23px;
        padding: 6px 4px;
        position: relative;
        width: 496px;s
    }

    .search_container_text {
    color:#006666; font-size:13px; font-weight:normal;vertical-align:top !important;
    }

Answer 1

这是Fiddle

<div class="search_container">
  <input type="text" name="search_people" placeholder="Search for people..."  class="search_container_textfield" size="30" value="" id="inputString" />
  <a href="search_people.php?id=123555"></a>
</div>


.search_container_textfield {
  border: 1px solid #ccc;
  border-radius: 5px 5px 5px 5px;
  float: left;
  font-size: 13px;
  height: 23px;
  padding: 6px 4px;
  position: relative;
  width: 496px;
}
.search_container_textfield:focus {
  outline: none;
  box-shadow: 0 0 2px 1px #00aeff;
}
.search_container a {
  background: url(http://www.extendcomm.com/wp-content/themes/extendcomm/images/icons/icon-search.png) center no-repeat;
  background-size: 30px 30px; /* background-size added because original icon is 128x128px */
  display: block;
  position: relative;
  width: 37px;
  height: 35px;
  float: right;
  margin: -37px -6px 0 0;
  padding-left: 3px;
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 0;
}
.search_container a:hover {
  background: #e8e8e8 url(http://www.extendcomm.com/wp-content/themes/extendcomm/images/icons/icon-search.png) center no-repeat;
  background-size: 30px 30px; /* background-size added because original icon is 128x128px */    
}

最终结果

如果你想从下面的搜索字段中搜索 id 是 jQuery 解决方案

$(function() {
   $('.search_container a').hover(function() {
      var id = $('.search_container_textfield').val();
      $(this).attr('href', 'search_people.php?id='+id);
   });
});

Answer 2

您可以将<span> 包裹在输入周围，然后使用span:after 对其进行内容处理，将其绝对定位并根据需要对齐。

Fiddle here 您只需将“搜索”更改为图标即可。

这是我做的另一种方法，它支持'fontawesome-'字体。

This link here has an icon (Which is clickable too)