在表单的输入元素中放入图标

您链接的站点使用了CSS技巧的组合来实现这一点。首先，它为<input>元素使用了一个背景图像。然后，为了将光标推过去，它使用padding-left。

换句话说，它们有这两条CSS规则:

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

只需使用CSS中的background属性即可。

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


#foo
{
background: url(/img/foo.png);
}

你可以试试这个:

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

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

如果这会给你带来任何问题(请阅读IE6)，你也可以在div中使用无界输入。

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

不是那么“干净”，但应该在旧的浏览器上工作。

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

将上述标签添加到您的CSS文件中，并使用指定的类。

我觉得这是最好最干净的解决办法。在input元素上使用文本:

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

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

 <label for="fileEdit">
<i class="fa fa-cloud-upload">
</i>
<input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="\{\{ contentType }}"/>
</label>

例如，你可以使用这个:标签隐藏输入(图标显示)。

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

.icon {
padding-left: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat left;
background-size: 20px;
}

<input type="text" class="icon" value placeholder="Search">

Or for right to left icon

.icon-rtl {
padding-right: 25px;
background: url("https://static.thenounproject.com/png/101791-200.png") no-repeat right;
background-size: 20px;
}

<input type="text" class="icon-rtl" value placeholder="Search">

与字体图标一起使用

<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";
}

我遇到过这样的情况。它没有工作，因为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;
}

我的解决方案是:

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;
}

值得一提的是，border， padding和text-align属性对于解决方案并不重要。我只是复制了原始代码。

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

这对我来说很管用:

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>

在开始时使用这个CSS类作为输入，然后相应地自定义:

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

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

1. 创建围绕输入和图标的容器。
2. 将容器位置设置为相对位置
3. 将图标设置为绝对位置。这将使图标相对于周围的容器进行定位。
4. 使用顶部，左侧，底部，右侧来定位容器中的图标。
5. 设置输入内的填充，使文本不与图标重叠。

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

这对我来说或多或少适用于标准表单:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>

我不想改变我的输入文本的背景，也不会与我的SVG图标工作。

我所做的就是将消极的保证金添加到图标中，这样它就会出现在输入框中

并将相同的值填充添加到输入中，这样文本就不会出现在图标下面。

<div class="search-input-container">


<input
type="text"
class="search-input"
style="padding-right : 30px;"
/>


<img
src="@/assets/search-icon.svg"
style="margin-left: -30px;"
/>


</div>

*内联风格是为了可读性考虑使用类

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

首先，你弯曲容器，使输入和图标在同一行。对齐物品可以使它们处于同一水平线上。

然后，使输入占用宽度的100%。给出图标的绝对位置，使其与输入重叠。

然后为输入添加右填充，这样输入的文本就不会到达图标。最后使用right css属性给图标留出一些距离输入边缘的空间。

注意: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>

你可以用另一种方法点击它，让它做一个函数。看看下面的例子:

<div id="search-bar">
<input placeholder="Search or Type a URL">
<button><i class="fas fa-search"></i></button>
</div>


#search-bar {
display: flex;
justify-content: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 60px;
}
#search-bar > input {
width: 750px;
font-size: 30px;
padding: 20px;
border-radius: 50px 0px 0 50px;
border: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
background: #fff; /* CSS Edit Here */
}
#search-bar > button {
background: #fff;
border: none;
font-size: 30px;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-radius: 0 50px 50px 0 ;
padding-right: 20px;
}

CSS后台解决方案在大多数情况下这样做，但它有一个问题，webkit (chrome)自动完成的图标消失。

所以这个解决方案是基于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;
}

1. 通过.input-email类，我将图标图像定义为div background(不受webkit autocomplete background的影响)。
2. 下一个.input-email输入定义我填充左侧输入元素，为图像提供空间，并将其设置为透明(当不应用自动补全时，这是有效的)
3. 最后，在webkit-autofill类中，我用过渡删除了自动补全设置的背景色。

注意:在第2点，我设置了重要的透明!，因为这个-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将图标作为背景图像添加到输入字段中。从那里，您可以使用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>

< a href = " https://codepen。io/Iram_Tech/pen/GRQqrNg" rel="nofollow noreferrer">https://codepen.io/Iram_Tech/pen/GRQqrNg