我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
我不想改变我的输入文本的背景,也不会与我的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>
*内联风格是为了可读性考虑使用类
其他回答
我觉得这是最好最干净的解决办法。在input元素上使用text-indent:
{#图标 背景图片:url(. . /图片/图标/ dollar.png); 平铺方式:不再重演; 背景位置:2px 3px; } <input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
这对我来说很管用:
输入。有效的{ 边框颜色:# 28 a745; padding-right: 30 px; 背景图片:url (https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png); 平铺方式:不再重演; Background-size: 20px; 背景位置:右中心; } < >形式 <标签= "名称" >名称> < /标签 <input class="valid" type="text" name="name" /> > < /形式
只需使用CSS中的background属性即可。
<input id="foo" type="text" />
#foo
{
background: url(/img/foo.png);
}
与字体图标一起使用
<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";
}
你可以试试这个:
input[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}