基于输入类型属性的伪元素的不同内容值

Question

我想为每个输入类型属性设置不同的 ::before 伪元素内容

我的意思是：如果标记看起来像这样 (type="email")

<input type="email" name="foo" />
<label for="foo">
  <span>Email</span>
</label>

我想把内容设为$icon1

span::before {
  content: $icon1;
}

但如果标记看起来像这样 (type="password")

<input type="password" name="foo-foo" />
<label for="foo-foo">
  <span>Password</span>
</label>

我想使内容价值成为 $icon2

span::before {
  content: $icon2;
}

希望你明白我的意思

Answer 1

您可以结合属性选择器。

input[type=email]+label span::before {
  content: "email input";
}

input[type=password]+label span::before {
  content: "password input";
}

<input type="email" name="foo" />
<label for="foo">
      <span></span>
</label>

<input type="password" name="foo-foo" />
<label for="foo-foo">
      <span></span>
</label>

基于输入类型属性的伪元素的不同内容值

Different content value of pseudo element basing on input type atribute

html

css

types

input

pseudo-element