Question

我是CSS的新手，我将不胜感激。

我正在尝试基于*属性在所需元素的span元素内设置星号input:valid的样式。

<input value="someValue" id="firstnameId" required />
<label class="lbStyle" for="FirstName">
    First Name
    <span class="ddff" style="color:red;">*</span>
</label>

我试图做：

input:valid .ddff {
    color: palegreen;
}

但是它不起作用。

如果输入有效，我想将*的颜色从红色更改为绿色，否则将其保持红色。

如何使用CSS实现它？

谢谢！

Answer 1

您的CSS是内联的，请尝试使用!important

input:valid + label .ddff {
      color: palegreen !important;
 }

<input value="someValue" id="firstnameId" required />
   <label class="lbStyle" for="FirstName"> First Name
    <span class="ddff" style="color:red;">*</span>
</label>

Answer 2

您可以将:valid和:invalid选择器用于表单元素，但有必要的限制。

尝试一下：

input[required]:invalid + label:after{content:"*";color:red}
input[required]:valid + label:after{content:"*";color:green}

<input placeholder="Placeholder" required />
<label> First Name</label>

Answer 3

它可以工作，因为.ddff不是输入孩子

<input value="someValue" id="firstnameId" required />
   <label class="lbStyle" for="FirstName"> First Name
    <span class="ddff">*</span>
</label>

.ddff{
      color: red;
}
input:valid + label .ddff {
      color: green;
 }

input:invalid +label .ddff {
      color: red;
 }

Answer 4

您的CSS选择器不正确，您必须使用Adjacent sibling combinator：

input + label .ddff {
    color: red;
}

input:valid + label .ddff {
    color: palegreen;
}

<input value="someValue" id="firstnameId" required />
<label class="lbStyle" for="FirstName">
    First Name
    <span class="ddff">*</span>
</label>

Answer 5

可以请您尝试：

CSS：

input:valid + label span.ddff {
      color: palegreen !important;
 }

注意：您可以使用嵌入式CSS。请覆盖您的CSS。

CSS根据有效输入更改样式

5 个答案: