我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
你可以试试这个: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>
其他回答
css后台解决方案做的大多数情况下，但它有一个问题与webkit (chrome)自动完成的图标消失。
还有其他解决方案，包括通过将输入包装在div中并添加一个额外的元素(img、div或类似元素)来更改html/dom结构。 我不喜欢解决方案，因为你需要调整元素css的绝对位置和/或调整像素大小，以获得正确的位置。 或者重新创建输入边框，将输入和img“合并”在一起。
所以这个解决方案是基于css背景图像不应用在输入元素，但应用在包装div。
HTML:
<div class="input-email">
<input type="text" placeholder="Email" name="email" id="email">
</div>
CSS:
.input-email {
background: url(/assets/images/email.svg) no-repeat scroll 14px 11px;
display: inline-block;
}
.input-email input{
padding-left: 40px;
background-color: transparent !important;
}
input:-webkit-autofill, input:-webkit-autofill:hover,
input:-webkit-autofill:focus, input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}
这种方式与.input-email类我定义我的图标图像为div背景(不受webkit autocomplete背景的影响)。 我将input元素的左侧填充为图像提供空间，并将其设置为透明(当不应用自动完成时，这是有效的) 最后，在webkit-autofill类中，我删除了自动补全设置的背景色。
注意:在第2点我设置了transparent !important，因为-internal-autofill-selected会在浏览器中呈现，如果不设置我的also为!我就无法覆盖它。
input:-internal-autofill-selected {
background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
}
我从这个帖子https://www.py4u.net/discuss/1069380得到了我的解决方案 我做了一些调整，虽然主要的功劳是他们。
其他人发布的CSS解决方案是实现这一目标的最佳方法。
如果这会给你带来任何问题(请阅读IE6)，你也可以在div中使用无界输入。
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</div>
不是那么“干净”，但应该在旧的浏览器上工作。
我能够通过CSS将图标作为背景图像添加到输入字段中。从那里，您可以使用background-size属性调整图像的大小，最后，使用background-position-x和background-position-y属性定位元素。我在下面分享了一个代码片段，并链接到Codepen中的一个工作示例:
body { margin: 0; padding: 0; font-family: sans-serif; } .input-container { padding: 50px; } input { box-sizing: border-box; width: 250px; padding-left: 36px; height: 48px; background-image: url('https://image.shutterstock.com/image-vector/apple-icon-vector-fruit-symbol-260nw-1466147615.jpg'); background-size: 20px; background-position-x: 10px; background-position-y: 50%; background-repeat: no-repeat; border-radius: 15px; } <!DOCTYPE> <html> <head> <title>Icon Inside Input Field</title> </head> <body> <div class="input-container"> <label for="email"><p>Email:</p></label> <input type="text" name="email" id="email" placeholder="iram.the.goat@mailer.com"> </div> </body> </html>
https://codepen.io/Iram_Tech/pen/GRQqrNg
你可以试试这个:
input[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}只需使用CSS中的background属性即可。
<input id="foo" type="text" />
#foo
{
background: url(/img/foo.png);
}
