我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
我如何把一个图标内的形式的输入元素?
现场版本:潮汐力主题
当前回答
我觉得这是最好最干净的解决办法。在input元素上使用text-indent:
{#图标 背景图片:url(. . /图片/图标/ dollar.png); 平铺方式:不再重演; 背景位置:2px 3px; } <input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />
其他回答
你可以试试这个: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>
你可以用另一种方法点击它,让它做一个函数。看看下面的例子:
<div id="search-bar">
<input placeholder="Search or Type a URL">
<button><i class="fas fa-search"></i></button>
</div>
#search-bar {
display: flex;
justify-content: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 60px;
}
#search-bar > input {
width: 750px;
font-size: 30px;
padding: 20px;
border-radius: 50px 0px 0 50px;
border: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
background: #fff; /* CSS Edit Here */
}
#search-bar > button {
background: #fff;
border: none;
font-size: 30px;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-radius: 0 50px 50px 0 ;
padding-right: 20px;
}
在开始时使用这个CSS类作为输入,然后相应地自定义:
.inp-icon { 背景:url(https://i.imgur.com/kSROoEB.png)no-repeat 100%; background-size: 16 px; } <input class="inp-icon" type="text">
其他人发布的CSS解决方案是实现这一目标的最佳方法。
如果这会给你带来任何问题(请阅读IE6),你也可以在div中使用无界输入。
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</div>
不是那么“干净”,但应该在旧的浏览器上工作。
您链接的站点使用了CSS技巧的组合来实现这一点。首先,它为<input>元素使用背景图像。然后,为了将光标移过去,它使用左填充。
换句话说,它们有这两条CSS规则:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;