Question

对于每个输入类型的属性，我希望伪元素之前:: ::的内容不同

我的意思是：如果标记看起来像这样（ 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>

基于输入类型属性的伪元素的不同含量值

1 个答案: