CSS 将图标放在表单中的输入元素内
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/917610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put icon inside input element in a form
提问by akif
How do I put an icon inside a form's input element?
如何在表单的输入元素中放置图标？
Live version at: Tidal Force theme
现场版：潮汐力主题
回答by Dan Lew
The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input>element. Then, in order to push the cursor over, it uses padding-left.
您链接的站点使用了 CSS 技巧的组合来实现这一点。首先，它为<input>元素使用背景图像。然后，为了将光标推过，它使用padding-left.
In other words, they have these two CSS rules:
换句话说，他们有这两个 CSS 规则：
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
回答by harpo
The CSS solutions posted by others are the best way to accomplish this.
其他人发布的 CSS 解决方案是实现这一目标的最佳方式。
If that should give you any problems (read IE6), you can also use a borderless input inside of a div.
如果这会给您带来任何问题（阅读 IE6），您还可以在 div 内使用无边框输入。
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</div>
Not as "clean", but should work on older browsers.
不是“干净”，但应该适用于较旧的浏览器。
回答by majid savalanpour
A solution without background-images:
没有背景图像的解决方案：
#input_container {
position:relative;
padding:0 0 0 20px;
margin:0 20px;
background:#ddd;
direction: rtl;
width: 200px;
}
#input {
height:20px;
margin:0;
padding-right: 30px;
width: 100%;
}
#input_img {
position:absolute;
bottom:2px;
right:5px;
width:24px;
height:24px;
}<div id="input_container">
<input type="text" id="input" value>
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>回答by Alan Haggai Alavi
You can try this:
你可以试试这个：
input[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}回答by Rust
I find this the best and cleanest solution to it. Using text-indenton the inputelement
我发现这是最好和最干净的解决方案。在元素上使用文本缩进input
CSS:
CSS：
#icon{
background-image:url(../images/icons/dollar.png);
background-repeat: no-repeat;
background-position: 2px 3px;
}
HTML:
HTML：
<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
回答by Rafi Haidari
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}
add above tags into your CSS file and use the specified class.
将上述标签添加到您的 CSS 文件中并使用指定的类。
回答by Ryan Forte
A simple and easy way to position an Icon inside of an input is to use the position CSS property as shown in the code below. Note: I have simplified the code for clarity purposes.
在输入中放置图标的一种简单而简单的方法是使用位置 CSS 属性，如下面的代码所示。注意：为了清晰起见，我简化了代码。
- Create the container surrounding the input and icon.
- Set the container position as relative
- Set the icon as position absolute. This will position the icon relative to the surrounding container.
- Use either top, left, bottom, right to position the icon in the container.
- Set the padding inside the input so the text does not overlap the icon.
- 创建围绕输入和图标的容器。
- 将容器位置设置为相对位置
- 将图标设置为绝对位置。这将相对于周围的容器定位图标。
- 使用 top、left、bottom、right 来定位容器中的图标。
- 在输入中设置内边距，使文本不会与图标重叠。
#input-container {
position: relative;
}
#input-container > img {
position: absolute;
top: 12px;
left: 15px;
}
#input-container > input {
padding-left: 40px;
}<div id="input-container">
<img/>
<input/>
</div>回答by Gxzzin
This works for me:
这对我有用：
input.valid {
border-color: #28a745;
padding-right: 30px;
background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: right center;
}<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>回答by Hasan
You Can Try this : Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec
你可以试试这个：Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec
<div class="container">
<form>
<div class="row">
<div class="input-group mb-3 col-sm-6">
<input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<div class="input-group-prepend bg-white">
<span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
</div>
</div>
</div>
</form>
</div>
??
??
回答by fantja
I had situation like this. It didn't work because of background: #ebebeb;. I wanted to put background on the input field and that property was constantly showing up on the top of the background image, and i couldn't see the image! So, I moved the backgroundproperty to be above the background-imageproperty and it worked.
我有过这样的情况。它没有工作，因为background: #ebebeb;. 我想在输入字段上放置背景，而该属性一直显示在背景图像的顶部，而我看不到图像！因此，我将该background物业移至该物业上方background-image并且它起作用了。
input[type='text'] {
border: 0;
background-image: url('../img/search.png');
background-position: 9px 20px;
background-repeat: no-repeat;
text-align: center;
padding: 14px;
background: #ebebeb;
}
Solution for my case was:
我的情况的解决方案是：
input[type='text'] {
border: 0;
background: #ebebeb;
background-image: url('../img/search.png');
background-position: 9px 20px;
background-repeat: no-repeat;
text-align: center;
padding: 14px;
}
Just to mention, border, paddingand text-alignproperties are not important for the solution. I just replicated my original code.
刚才提到，border，padding和text-align属性不是该解决方案非常重要。我只是复制了我的原始代码。
