小编Jax*_*xon的帖子

使用 CSS 将“*”添加到具有“required”属性的输入字段的标签

label我想知道当标签的for属性用于具有inputhtml属性的元素时,是否有一种方法仅使用 CSS 向元素添加星号requiredlabel或者,如果后面紧跟着一个input具有该属性的元素,我们可以使用逻辑required

有效的方法是这样的:

input[required] + label:after {
  content: '*';
  color: red;
}
Run Code Online (Sandbox Code Playgroud)
<form>
  <div>
    <input for="name" type="text" required />
    <label id="name">Name</label>
  </div>
  <div>
    <input for="age" type="text" />
    <label id="age">Age</label>
  </div>
</form>
Run Code Online (Sandbox Code Playgroud)

但我所说的是如果labelinput被交换,如下例所示,这是更常见的。CSS 同级选择器+不适用于这种情况。label当元素是第一个而第二个元素时,有什么方法可以做类似上面的事情吗input

/* ??? */
Run Code Online (Sandbox Code Playgroud)
<form>
  <div>
    <label for="name">Name</label>
    <input id="name" type="text" required />
  </div>
  <div>
    <label for="age">Age</label>
    <input id="age" type="text" />
  </div>
</form>
Run Code Online (Sandbox Code Playgroud)

谢谢

html css sass

6
推荐指数
1
解决办法
2万
查看次数

标签 统计

css ×1

html ×1

sass ×1