Question

我正在尝试在输入字段上使用:after CSS，但它不起作用。

我做错了什么？我应该使用其他选择器吗？

＆＃13;

._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";
}

＆＃13;

<div class="_ght">
  <input type="text" name="">
</div>

＆＃13;

示例：

Answer 1

正如@zgood写道：:before和:after仅适用于html元素。

我建议您在输入后使用额外的span来显示您的图标。

  <span class="addon"></span>

如果没有额外的HTML，请将您的图标添加到输入容器的:after元素。

＆＃13;

._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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这可以解决你的问题。

<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>

使用以下命令将字体awesome图标添加到输入类型：after

2 个答案: