我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
您链接的站点使用了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技巧的组合来实现这一点。首先,它为<input>元素使用背景图像。然后,为了将光标移过去,它使用左填充。
换句话说,它们有这两条CSS规则:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
与字体图标一起使用
<input name="foo" type="text" placeholder="">
OR
<input id="foo" type="text" />
#foo::before
{
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f007";
}
其他人发布的CSS解决方案是实现这一目标的最佳方法。
如果这会给你带来任何问题(请阅读IE6),你也可以在div中使用无界输入。
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</div>
不是那么“干净”,但应该在旧的浏览器上工作。
这对我来说或多或少适用于标准表单:
<button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>