添加：after：启用CSS伪类

Question

是否可以仅在纯CSS中将:after伪元素添加到某些类型/类的:enabled伪类中？

作为示例，根据您的反馈，我希望在禁用的广播中没有边框（请原谅我没有将:after元素居中）：https://jsfiddle.net/msdobrescu/z398jjoj/20/

Answer 1

你做不到。您无法在表单元素上添加:before或:after伪。基本上它们在容器元素内部渲染。

你可以做的最好的事情就是输入一个空元素，比如span并使用像

这样的选择器

input[type=text]:enabled + span:after {
  /* Props goes here */
}

Answer 2

:enabled CSS伪类表示任何已启用的元素。它通常用在我认为的表单元素上。除非您向元素声明:disabled，否则:enabled是默认状态。

此外，大多数表单元素都不允许使用任何伪元素，例如<input>，<select>和<textarea> ......但有些元素是允许的，例如{{ 1}}。

<button>

button:enabled:after {
  content: "*"
}

对于没有伪元素的元素，您可以使用带有span标记的兄弟选择器<button>Button</button> <button enabled>Button</button> <button disabled>Button</button>或+来获得相同的结果。

~

input[type="radio"]:enabled + span:after {
  content: "*"
}

基于您的代码的示例，也将广播放在圆圈的中心。

• jsFiddle - 带有修改过的标记结构的纯CSS。

• jsFiddle - 使用jQuery和原始标记结构。

Answer 3

:after只适用于包含结束标记的元素+它不适用于标记<select>。 由于:enabled通常与表单一起使用，因此无法一起使用。

如果您使用表单更容易将其元素包装在<div>中，然后只需将:after添加到其中。

您也可以分享您的代码，以便更好地了解问题。