html - CSS 根据有效输入更改样式

Question

我是 CSS 的新手，非常感谢任何帮助。

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

<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>