`：after`-伪类不能与`input`元素一起使用

Question

我试图通过使用close类input在psudo元素的每个元素上添加一个after按钮。但不起作用。与button元素相同。

这是我的代码：

.textBox {
    padding: 15px ;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.textBox:after {
    content: "";
    width: 15px;
    height: 15px;
    background: #ff0 url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -75px;
    border:1px solid red;
    display: inline-block;
    border:1px solid red;
}

<input type="text" class="textBox" value="mytext" name="" id="">

<button class="textBox">Click me</button>

Answer 1

使用包装div并在那里设置textBox类，而不是在input中设置

.textBox {
    padding: 15px ;
    text-decoration: none;
    display: inline-block;
    position: relative;
}

.textBox:after {
    content: "";
    width: 15px;
    height: 15px;
    background: #ff0 url("http://www.gentleface.com/i/free_toolbar_icons_16x16_black.png") no-repeat -30px -75px;
    border:1px solid red;
    display: inline-block;
    border:1px solid red;
}

<div class="textBox">
<input type="text"  value="mytext" name="" id="">
</div>
<button class="textBox">Click me</button>