我怎样才能在搜索字段中放置搜索图标。此图标位于搜索字段的前面，而搜索按钮位于搜索栏之后。像这样的- 原文由 user2719152 发布，翻译遵循 CC BY-SA 4.0 许可协议

新手上路，请多包涵

我怎样才能在搜索字段中放置搜索图标。此图标位于搜索字段的前面，而搜索按钮位于搜索栏之后。像这样的-

在此处输入图像描述

原文由 user2719152 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css

阅读 255

2 个回答

得票最新

社区维基

发布于
2022-12-19

✓ 已被采纳

 input{
background: url("http://kodyrabatowe.wp.pl/img/ico/search_gr.png") top left     no-repeat;
height:30px;
padding-left:25px;
}
//////////////////////////
<!-- html code -->
<input type="text" name="txtBox" >

原文由 Insomniac 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-19

这是一个简单的小例子，没有任何 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>

原文由 Rohit Luthra 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Stack Overflow 翻译

子站问答

访问

本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。

搜索字段中的搜索图标

你尚未登录，登录后可以

如何自定义设置虚线边框的样式？

怎么把一个矩形div变成一个直角三角形？

怎么去掉聚焦文字处的光标竖线？

Web 上的室内导航效果是如何实现的呢？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

浏览器可以直接解析scss文件了吗？

Flask中static文件夹下的本地图片无法在HTML页面加载怎么办？

Stack Overflow 翻译