[英]Add font awesome icon to input type using :after
我正在尝试在输入字段上使用:after
CSS,但是它不起作用。
我究竟做错了什么? 我应该使用其他选择器吗?
._ght{ width: 100%; display: inline-block; text-align: center; margin-top: 10px; } ._ght input[type="text"]{ width: 48%; line-height: 32px; font-size: 26px; border: solid 1px #94a6ae; } ._ght input:after{ font-family: FontAwesome; content: "\\f06e"; }
<div class="_ght"> <input type="text" name=""> </div>
这里的例子:
正如@zgood写道:: :before
和:after
仅适用于html元素。
我建议在输入之后使用额外的span
来显示图标。
<span class="addon"></span>
如果没有额外的HTML,则将图标添加到输入容器的:after
元素中。
._ght{ width: 100%; display: inline-block; text-align: center; margin-top: 10px; } ._ght input[type="text"]{ width: 48%; line-height: 32px; font-size: 26px; margin-left: 10px; border: solid 1px #94a6ae; } ._ght:after{ font-family: FontAwesome; font-size: 25px; content: "\\f06e"; border: 1px solid grey; padding: 6px 4px 3px 4px; margin-left: -5px; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="_ght"> <input type="text" name=""> </div>
这应该可以解决您的问题。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
search{
float: left; width: 800px;
margin-left: 220px
}
.search input[type=text]{
padding: 10px;
width: 600px;
border-right: none;
border: 1px solid #f1f1f1;
float: left;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
}
.search button[type=submit]{
padding:9px 20px;
border-left: none;
float: left;
border: 1px solid #f1f1f1;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
color: #888;
}
</style>
<div class="search">
<form id="search">
<input type="text" placeholder="Search for Products and Services"/>
<button type="submit">
<i class="fa fa-search" style="font-size: 18px;"></i>
</button>
</form>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.