试图将星号添加到所需的输入字段 [英] Trying to add asterisk to required input fields

问题描述

我不认为我很理解：在和之前：之后，因为我无法得到这个加工。我只是试图在表单中的必填字段后添加星号。

我的代码很简单：

 < input id =nametype =textrequired =requiredautofocus =placeholder =Nameautocomplete =offvalue =maxlength =40 class =requiredname =name/> 
 
 / *必填字段* / 
。必需：在{
内容后：'*'; 
颜色：＃EF5F5F; 
 
 $ / code> 

为什么这不起作用？

我的小提琴在这里： http://jsfiddle.net/3EFTN/

解决方案

生成的内容作为您要添加的项目的子项添加。因此，浏览器正在这样做（为简洁起见，一些属性被忽略）：



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

无效。



查看规范以更好地理解它（它有关于浏览器如何解释它的例子）。

I don' think I quite understand :before and :after since I'm not able to get this working. I'm simply trying to add an asterisk after required fields in a form.

My code is simple:

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

Why is this not working?
My fiddle here: http://jsfiddle.net/3EFTN/

解决方案

Generated content is added as a child of the item you're adding it to. So the browser is doing this (some attributes skipped for brevity):

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

Which is not valid.

Take a look at spec to understand it better (it has examples about how the browser interprets it).

这篇关于试图将星号添加到所需的输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！