尝试将星号添加到所需的输入字段

时间:2013-03-31 11:21:56

标签: html css

我认为我完全理解:before:after,因为我无法使其发挥作用。我只是想在表单中的必填字段后面添加一个星号。

我的代码很简单:

<input id="name" type="text" required="required" autofocus="" placeholder="Name" autocomplete="off" value="" maxlength="40" class="required" name="name" />

/* Required field */
.required:after {
  content: '*';
  color: #EF5F5F;
}

为什么这不起作用?
我的小提琴:http://jsfiddle.net/3EFTN/

3 个答案:

答案 0 :(得分:5)

生成的内容会作为您要添加的项目的子项添加。所以浏览器正在这样做(为简洁起见,跳过了一些属性):

<input class="required">
  <span class="after">*</span>
</input>

哪个无效。

查看spec以更好地理解它(它有关于浏览器如何解释它的示例)。

答案 1 :(得分:1)

:after:before选择器不适用于表单元素,例如input,因此使用CSS无法实现。我建议使用jQuery或在元素之后添加另一个<span>

答案 2 :(得分:1)

你的css试图在<input>元素中添加*,这是不可能的,因为它不能包含任何其他元素。

我们这样说吧::after表示您的内容将插入,并且在您的选择器的末尾,:before表示您的内容将被插入< strong>进入并在元素的开头。

您可以在此处找到一个很好的解释:http://coding.smashingmagazine.com/2011/07/13/learning-to-use-the-before-and-after-pseudo-elements-in-css/