在文本框内搜索图标

Question

如何在搜索文本框中添加与Facebook搜索字段非常相似的搜索图标。我是新手，需要帮助/建议。

Answer 1

您可以使用CSS

来完成

#searchBox{
  width: 260px;
  padding: 5px;
  padding-right: 40px;
  outline: none;
  border: 2px solid #999999;
  border-radius: 5px;
  background-color: #FBFBFB;
  font-family: Cambria, Cochin, Georgia, serif;
  font-size: 16px;
  background-position: 270px -10px;
  background-image: url(http://www.kirupa.com/images/search.png);
  background-repeat: no-repeat; 
}

这是您的HTML

<input type="text" id="searchBox"/>

Answer 2

这是你要找的东西吗？

Fiddle

如果是，那么这是代码，

HTML：

<input type="text" id="search">

CSS：

#search {
   width: 300px;
   padding: 10px;
   border: 1px solid #2189C8;
   border-radius: 3px;
   background: url('http://cliparts.co/cliparts/rTL/n8R/rTLn8RLBc.png') no-repeat right center;
   background-size: 20px;
}