我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
您链接的站点使用了CSS技巧的组合来实现这一点。首先,它为<input>元素使用背景图像。然后,为了将光标移过去,它使用左填充。
换句话说,它们有这两条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);
}
在输入中定位图标的一个简单易行的方法是使用下面代码所示的CSS属性position。 注意:为了清晰起见,我简化了代码。
创建围绕输入和图标的容器。 将容器位置设置为相对位置 将图标设置为绝对位置。这将使图标相对于周围的容器进行定位。 使用顶部,左侧,底部,右侧来定位容器中的图标。 设置输入内的填充,使文本不与图标重叠。
#输入容器{ 位置:相对; } #输入容器> img { 位置:绝对的; 上图:12 px; 左:15 px; } #输入容器>输入{ padding-left: 40像素; } < div id = "输入容器" > < img / > <输入/ > < / div >
你可以试试这个:
input[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}
没有背景图片的解决方案:
.icon { padding-left: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复左; background-size: 20 px; } <input type="text" class="icon" value placeholder="Search">
或者从右到左的图标
.icon-rtl { padding-right: 25 px; 背景:url(“https://static.thenounproject.com/png/101791-200.png”)无重复权限; background-size: 20 px; } <input type="text" class="icon-rtl" value placeholder="Search">
这对我来说或多或少适用于标准表单:
<button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>