我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
在开始时使用这个CSS类作为输入,然后相应地自定义:
.inp-icon { 背景:url(https://i.imgur.com/kSROoEB.png)no-repeat 100%; background-size: 16 px; } <input class="inp-icon" type="text">
其他回答
你可以试试这个:
input[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}
我觉得这是最好最干净的解决办法。在input元素上使用text-indent:
{#图标 背景图片:url(. . /图片/图标/ dollar.png); 平铺方式:不再重演; 背景位置:2px 3px; } <input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
我遇到过这样的情况。它没有工作,因为背景:#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;
}
值得一提的是,边框、填充和文本对齐属性对于解决方案并不重要。我只是复制了原始代码。
只需使用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;