如何在输入标签内插入图像

Question

我只想在输入标签内显示图像，就像大多数精彩的网站一样

在这里我想在注册号和密码之前的文本框中插入一个图像。我该怎么办？

Answer 1

这里是文本框的HTML：

<input type="text" name="whatever" id="funkystyling" />

这里是左边图片的CSS：

#funkystyling {

    background: white url(/path/to/icon.png) left no-repeat;
    padding-left: 17px;
}

这里是右边图片的CSS：

#funkystyling {
    background: white url(/path/to/icon.png) right no-repeat;
    padding-right: 17px;
}

Answer 2

我相信你正试图在你输入元素的前面有一个图标。您可以通过相应地添加输入和样式的<i>标记来使用它。

<强> HTML                            

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicons-lock"></i>
    <input type="text" class="form-control" />
</div>

<强> CSS

/* enable absolute positioning */

.inner-addon { 
    position: relative; 
    margin: 10px;
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

这是一个有效的 jsfiddle

Answer 3

第一个选项是设置输入框的背景图像，但问题是你必须为不同的输入尺寸处理它。 另一个选项是在输入框之前/之后设置伪元素，并在伪元素的内容中指定图像URL。

在我看来，第二种选择对你的要求更稳定。

Answer 4

我认为这一行可以解决您的问题。因此，创建一个看起来像文本框并隐藏真实文本框边框的div

HTML

<div id="funkystyling">
<div></div>
<input type="text" name="whatever">
</div>

CSS

#funkystyling {
border:solid;
width: 300px
}

#funkystyling div{
border: solid 2px;
width: 20%;
height: 20px;
background: white url(/path/to/icon.png) left no-repeat;
float: left
}

#funkystyling-child input{
float: left;
width: 80%;
border: none
}