将图标放在表单中的input元素内

Question

如何在表单的输入元素中放置一个图标？

现场版:潮汐力主题

Answer 1

您链接的网站使用CSS技巧组合来解决此问题.首先,它使用背景图像作为<input>元素.然后,为了将光标推过,它使用padding-left.

换句话说,他们有这两个CSS规则:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

Answer 2

其他人发布的CSS解决方案是实现这一目标的最佳方式.

如果这应该给你任何问题(阅读IE6),你也可以在div内使用无边框输入.

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

不是"干净",但应该适用于旧浏览器.

Answer 3

你可以试试这个:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

Answer 4

没有背景图像的解决方案:

#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>

Answer 5

我发现这是最好,最干净的解决方案.在元素上使用text-indentinput

CSS:

#icon{
background-image:url(../images/icons/dollar.png); 
background-repeat: no-repeat; 
background-position: 2px 3px;
}

HTML:

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

Answer 6

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.

1. Create the container surrounding the input and icon.
2. Set the container position as relative
3. Set the icon as position absolute. This will position the icon relative to the surrounding container.
4. Use either top, left, bottom, right to position the icon in the container.
5. Set the padding inside the input so the text does not overlap the icon.

#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>

Answer 7

.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

将以上标记添加到CSS文件中并使用指定的类.

Answer 8

我通过下面的代码实现了这一点。

首先，弯曲容器，使输入和图标位于同一行。对齐项目使它们处于同一水平。

然后，无论如何，让输入占据宽度的 100%。给予图标绝对定位，使其与输入重叠。

然后向输入添加右填充，以便输入的文本不会到达图标。最后使用rightCSS 属性为图标提供距输入边缘一些空间。

注意：Icon如果您使用 ReactJs，则该标签可以是真正的图标，也可以是您在项目中使用图标的任何其他方式的占位符。

.inputContainer {
  display: flex;
  align-items: center;
  position: relative;
}

.input {
  width: 100%;
  padding-right: 40px;
}

.inputIcon {
  position: absolute;
  right: 10px;
}

<div class="inputContainer">
   <input class="input" />
   <Icon class="inputIcon" />
 </div>

Answer 9

你可以试试这个：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>

??

Answer 10

与font-icon一起使用

<input name="foo" type="text" placeholder="&#61447;">

要么

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

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}

Answer 11

这对我有用：

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>

Answer 12

在开始时使用这个 css 类作为你的输入，然后相应地自定义：

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }

<input class="inp-icon" type="text">