CSS3:带输入的伪元素之后

Question

只是玩:before和:after.

看来我不能用它/用input按钮？以为我可以使用它确实为必填字段显示星号.不一定是我要做的,只是一个选择

input {
    position: relative;
}
input:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;
}

相同的代码工作正常 li

li {
    clear: both; 
    margin: 0 0 10px; 
    position: relative;
}
li:after {
    content: ''; 
    background: url(accept.png) 0 0 no-repeat; 
    height: 16px; 
    position: absolute; 
    right: -20px; 
    top: 5px; 
    width: 16px;   
}

Answer 1

我也认为同样的事情会很有用,但是,我能够让前/后伪元素可靠地工作的最简单方法是将输入包装在一个SPAN标签中并对其应用一个类.

本讨论提供了一些有关为什么input:after不起作用的见解:http: //forums.mozillazine.org/viewtopic.php？f = 25&t = 291007&start = 0&st = 0&sk = t&sd = a

你可以这样做:

.required:after {
    content: "REQUIRED";
    color: orange;
    margin-left: 1em; /* space between the input element and the text */
    padding: .1em;
    background-color: #fff;
    font-size: .8em;
    border: .1em solid orange;
}

<span class="required"><input id="foo" /></span>

Answer 2

这里提出了一个基本相同的问题,有一个很好的解释:https://stackoverflow.com/a/4660434/749227

总而言之,输入不是容器,不能有子容.因此:before和:after伪元素插入的内容通常不能插入到输入中.

请注意,不是使用<input type="submit|button">你可以使用<button>哪个可以有孩子,所以对于那个输入有一个'解决方法'(好吧,如果你有控制标记;)