Answers:
您链接的网站使用CSS技巧的组合来实现这一目标。首先,它使用背景图片作为<input>
元素。然后,为了将光标移到上方,它使用padding-left
。
换句话说,它们具有以下两个CSS规则:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
其他人发布的CSS解决方案是实现此目标的最佳方法。
如果那会给您带来任何问题(请阅读IE6),则还可以在div中使用无边界输入。
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</div>
并非“干净”,但应在较旧的浏览器上运行。
没有背景图片的解决方案:
#input_container {
position:relative;
padding:0 0 0 20px;
margin:0 20px;
background:#ddd;
direction: rtl;
width: 200px;
}
#input {
height:20px;
margin:0;
padding-right: 30px;
width: 100%;
}
#input_img {
position:absolute;
bottom:2px;
right:5px;
width:24px;
height:24px;
}
<div id="input_container">
<input type="text" id="input" value>
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>
我发现这是最好,最干净的解决方案。在元素上使用text-indentinput
CSS:
#icon{
background-image:url(../images/icons/dollar.png);
background-repeat: no-repeat;
background-position: 2px 3px;
}
HTML:
<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
在输入中放置Icon的一种简单方法是使用position CSS属性,如下面的代码所示。注意:为了简化起见,我简化了代码。
#input-container {
position: relative;
}
#input-container > img {
position: absolute;
top: 12px;
left: 15px;
}
#input-container > input {
padding-left: 40px;
}
<div id="input-container">
<img/>
<input/>
</div>
input { border: none; }
并添加边框#input-container { border: 1px solid #000; }
以使其看起来像图像在输入中,并且实际上是输入的一部分。
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}
将上述标记添加到CSS文件中,并使用指定的类。
这对我有用:
input.valid {
border-color: #28a745;
padding-right: 30px;
background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: right center;
}
<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>
您可以尝试以下方法:Bootstrap-4 Beta
https://www.codeply.com/go/W25zyByhec
<div class="container">
<form>
<div class="row">
<div class="input-group mb-3 col-sm-6">
<input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<div class="input-group-prepend bg-white">
<span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
</div>
</div>
</div>
</form>
</div>
我有这样的情况。由于background: #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;
}
刚才提到,border
,padding
和text-align
属性不是该解决方案非常重要。我只是复制了原始代码。
background
是一种简写的属性名称,可用于一次覆盖所有背景属性:background: [color] [image url] [repeat] [position]
,这就是为什么您的颜色覆盖了所有内容的原因。您也可以将其保留在原处,并将其重命名为background-color
background
是速记属性名称。更好的解决方法是不使用速记,而将其background-color
用于color属性(假设您同时需要颜色和图像)。
与font-icon一起使用
<input name="foo" type="text" placeholder="">
要么
<input id="foo" type="text" />
#foo::before
{
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f007";
}
在开始时使用此CSS类作为输入,然后相应地自定义:
.inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
}
<input class="inp-icon" type="text">