代码之家 › 专栏 › 技术社区 › Hadi

如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

element css html

Hadi · 技术社区 · 1 年前

我在输入之后添加*, 我想选这个换颜色 input:valid 和 invalid , 但是通过这个CSS不工作为什么?

form::after {
    content: "*";
}

#fname:invalid~::after {
    background: red;
    border-color: yellow;
}

#fname:valid~::after {
    background: rgb(3, 183, 168);
    border-color: rgb(9, 9, 0);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <form action="/action_page.php" id="frm">
        <label for="fname">First name:</label><br>
        <input required type="text" id="fname" value=""><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

2 回复 | 直到 1 年前

imhvost 1 年前

您可以使用 :has() (在layout.css.has-selectro.enabled标志后面的Firefox中支持):

#frm:after {
  content: "*";
}

#frm:has(#femail:invalid):after {
  background: red;
}

#frm:has(#femail:valid):after {
  background: rgb(3, 183, 168);
}

<form action="?" id="frm">
  <label for="fname">Email:</label><br>
  <input required type="email" id="femail"><br><br>
  <input type="submit" value="Submit">
</form>

或者简单地更换 :after 在里面 <form> 比如说, <span>*</span> 以下为:

#femail:invalid ~ span {
  background: red;
}

#femail:valid ~ span {
  background: rgb(3, 183, 168);
}

<form action="?" id="frm">
  <label for="fname">Email:</label><br>
  <input required type="email" id="femail"><br><br>
  <input type="submit" value="Submit">
  <span>*</span>
</form>

Mohamed Elsayed 1 年前

代替 ::after 带跨度

<form action="/action_page.php" id="frm">
    <label for="fname">First name:</label><br>
    <input required type="text" id="fname" value=""><br><br>
    <span>span</span>
    <input type="submit" value="Submit">
</form>

input:valid + span::after {
  content: "";
  background: red;
}

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前