CSS3：后的伪元素与输入 [英] CSS3 :after pseudo element with input

问题描述

只需使用：之前和：之后。

似乎我不能使用/用输入按钮？想到我可以使用它显示一个星号的必填字段。不一定我会做，只是一个选项

It seems I can't use them on/with an input button? Thought I could potentially use it do display an asterisk for required fields. Not necessarily what I will do, just an option

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

推荐答案

同样的事情将是有用的，但唉，我已经能够让前/后伪元素工作可靠的最简单的方法是将输入包装在 SPAN 标签并应用类。

I've also thought that the same thing would be useful, but alas, the simplest way I have been able to get the before/after pseudo elements to work reliably is by wrapping the input in a SPAN tag and applying a class to that.

此讨论提供了一些关于为什么输入：无法使用：
http://forums.mozillazine.org/viewtopic.php?f=25&t=291007&start=0&st=0&sk=t&sd=a

This discussion provides some insight as to why input:after doesn't work: 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>

这篇关于CSS3：后的伪元素与输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！