英文:
how to select a psoudo element (after) for change style in invalid and valid input
问题
I add * after an input,
I want to select this to change the color in input:valid and input:invalid,
but this CSS is not working. Why?
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>
英文:
i add * after a input,
i want select this for change color in input:valid and invalid,
but by this CSS not working why?
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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);
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 1
你可以使用:has()（在 Firefox 中需要启用 layout.css.has-selector.enabled 标志）：
#frm:after {
content: "*";
}
#frm:has(#femail:invalid):after {
background: red;
}
#frm:has(#femail:valid):after {
background: rgb(3, 183, 168);
}
或者简单地将<form>中的 :after 替换为，例如，<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>
英文:
You can use :has() (supported in Firefox behind the layout.css.has-selector.enabled flag):
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#frm:after {
content: "*";
}
#frm:has(#femail:invalid):after {
background: red;
}
#frm:has(#femail:valid):after {
background: rgb(3, 183, 168);
}
<!-- language: lang-html -->
<form action="?" id="frm">
<label for="fname">Email:</label><br>
<input required type="email" id="femail"><br><br>
<input type="submit" value="Submit">
</form>
<!-- end snippet -->
Or simply replace :after in <form> with, say, <span>*</span>:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#femail:invalid ~ span {
background: red;
}
#femail:valid ~ span {
background: rgb(3, 183, 168);
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
答案2
得分: 1
input:valid + span::after {
content: "";
background: red;
}
英文:
Replace ::after with span
<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;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论