搜索字段

时间：2016-02-03 09:33:50

标签： html css3

如何在搜索字段中放置搜索图标。此图标位于搜索字段的前面，而搜索按钮位于搜索栏后面。 像这样的东西 -

enter image description here

6 个答案:

答案 0 :(得分：5)

num == 5

答案 1 :(得分：1)

查看此代码，以了解如何实现：

<div id="input_container">
    <input type="text" id="input" value="search">
    <img src="URL" id="input_img">
</div>

#input_container { position:relative; padding:0; margin:0; }
#input { height:20px; margin:0; padding-left: 30px; }

#input_img { position:absolute; bottom:12px; left:180px; width:10px; height:10px; }

http://codepen.io/anon/pen/GoXKyg

答案 2 :(得分：1)

使用下面的代码usonh bootstrap css。此代码可以在您的页面中轻松实现。

使用Bootstrap，默认图标文件i使用了标签

如果你想要不同的图标，那么你可以在这里使用。

HTML代码： - 

 <div class="col-xs-6" >
   <div class="right-inner-addon">
     <i class="icon-search"></i>
     <input type="search" class="form-control" placeholder="Search" />
   </div>
 </div>

CSS： - 

.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    pointer-events: none;
}

答案 3 :(得分：1)

这是一个简单且小的示例，没有任何div的包装，单个元素是输入类型，左侧带有图标。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> 
input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    background-color: none;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    outline: none;
}

</style>
</head>
<body>
<form>
  <input type="text" name="search" placeholder="Search by list name">
</form>
</body>
</html>

答案 4 :(得分：0)

这是我使用的CSS代码：

<style>
    #add{
        padding:17px;padding-left:55px;width:300px;border:1px solid #f5f5f5;
        font-size:13px;color:gray;
        background-image:url('http://i47.tinypic.com/r02vbq.png');
        background-repeat:no-repeat;
        background-position:left center;outline:0;
    }
</style>

注意：我添加了许多额外的代码以使搜索框看起来更好，使搜索框apear的必要代码是padding-left，background-image：url，background-repeat和background-position。将“http://i47.tinypic.com/r02vbq.png”替换为您想要的任何搜索图标。

了解现在在HTML5中，大多数浏览器都会呈现

，这一点也很重要 
<input type="search" results>

带有搜索图标。输入类型搜索使其成为搜索框，使用“x”按钮清除，添加“结果”也会显示搜索框。当然，您也可以在常规搜索框中添加带有CSS和JavaScript的x按钮。同样重要的是要注意输入类型搜索允许非常少的样式。在Mac上的Safari演示：

演示enter image description here

我希望它适合你。

答案 5 :(得分：0)

使用此代码

input {
  width: 66%;
  border-radius: 26px;
  border: 1px solid #ada9a9;
  padding: 1% 6%;
  margin: 1% 1%;
  background-image: url(https://www.pngarea.com/pngm/109/1164446_searchicon-png-search-icon-png-download.png);
  background-size: contain;
  background-repeat: no-repeat;
  outline: 0;
  background-position: 12px;
  background-size: 16px;
}
<input type="text" placeholder="Type Keywords to find answers">

相关问题
最新问题