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

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

总而言之，输入不是容器，不能有子级。 :before 和 :after 伪元素插入的内容通常不能插入到输入中。

请注意，您可以使用<button>，而不是使用<input type="submit|button">，它可以有孩子，因此对于该输入有一个“解决方法”（好吧，如果您可以控制标记；）

Answer 2

我需要使用输入来执行此操作，但无权更改由 Wordpress 和 Jquery 生成的 html。好吧，也许我可以，但这将是一个漫长的解决方法。相同的原因：可访问性。

因此，您可以使用一种可能的解决方法：

#comment-form input[type=text],
#comment-form input[type=email],
#comment-form input[type=url],
#comment-form input[type=password] {
width:40%; margin-right:60%; }

如果随后出现错误消息，则它不再适合同一行并被碰撞。当然，您需要考虑是否可以在布局中支持百分比宽度，但您明白了。

Answer 3

我只是研究了同样的事情——只是我想用它来显示访问键：

*[accesskey]:after {
     content:' [' attr(accesskey) ']';
}

不太热衷于将 accesskey 值写入多个位置，因为这通常会增加不保持值相同的风险，并且在 UE 方面会很糟糕 =0/

Answer 4

这个答案（行下方的文本）不起作用（无论如何，对于基于文本的inputs），但它被留在原地，因为它可能会拯救其他人试图通过相同的方式达到相同的最终结果的麻烦。这样做的唯一方法是，作为@Tim notes, in his answer，将input（或其他）元素包装在另一个元素中，例如span，然后使用@987654328 设置样式that @伪元素。

JS Fiddle demo of a working example.

---

嗯，它们似乎工作得很好JS Fiddle demo，除了没有position: absolute 的:after 内容出现在元素本身内（在按钮内，或复选框等）。

html:

<button class="req">button</button>
<input class="req" type="text" />
<input class="req" type="radio" />
<input class="req" type="checkbox" />
<textarea class="req"></textarea>

css:

input,
textarea {
    display: block;
}
.req {
    position: relative;
}

.req:after {
    content: "*";
    margin: 0 0 0 0.5em;
    position: absolute;
    top: 0;
    right: -1em;
}

Answer 5

我也认为同样的事情会很有用，但是，我能够让 before/after 伪元素可靠工作的最简单方法是将输入包装在一个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>