如何选择伪元素（after）以在无效和有效输入中更改样式。

huangapple
go评论96阅读模式
英文:

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?

  1. form::after {
  2.     content: "*";
  3. }
  5. #fname:invalid ~::after {
  6.     background: red;
  7.     border-color: yellow;
  8. }
  10. #fname:valid ~::after {
  11.     background: rgb(3, 183, 168);
  12.     border-color: rgb(9, 9, 0);
  13. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <form action="/action_page.php" id="frm">
  10.         <label for="fname">First name:</label><br>
  11.         <input required type="text" id="fname" value=""><br><br>
  12.         <input type="submit" value="Submit">
  13.     </form>
  14. </body>
  15. </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 -->

  1. form::after {
  2.     content: &quot;*&quot;;
  3. }
  5. #fname:invalid~::after {
  6.     background: red;
  7.     border-color: yellow;
  8. }
  10. #fname:valid~::after {
  11.     background: rgb(3, 183, 168);
  12.     border-color: rgb(9, 9, 0);
  13. }

<!-- language: lang-html -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.     &lt;meta charset=&quot;UTF-8&quot;&gt;
  5.     &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  6.     &lt;title&gt;Document&lt;/title&gt;
  7. &lt;/head&gt;
  8. &lt;body&gt;
  9.      &lt;form action=&quot;/action_page.php&quot; id=&quot;frm&quot;&gt;
  10.         &lt;label for=&quot;fname&quot;&gt;First name:&lt;/label&gt;&lt;br&gt;
  11.         &lt;input required type=&quot;text&quot; id=&quot;fname&quot; value=&quot;&quot;&gt;&lt;br&gt;&lt;br&gt;
  12.         &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
  13.     &lt;/form&gt;
  14. &lt;/body&gt;
  15. &lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

你可以使用:has()（在 Firefox 中需要启用 layout.css.has-selector.enabled 标志）：

  1. #frm:after {
  2.   content: "*";
  3. }
  5. #frm:has(#femail:invalid):after {
  6.   background: red;
  7. }
  9. #frm:has(#femail:valid):after {
  10.   background: rgb(3, 183, 168);
  11. }

或者简单地将<form>中的 :after 替换为，例如，<span>*</span>：

  1. #femail:invalid ~ span {
  2.   background: red;
  3. }
  5. #femail:valid ~ span {
  6.   background: rgb(3, 183, 168);
  7. }
  1. <form action="?" id="frm">
  2.   <label for="fname">Email:</label><br>
  3.   <input required type="email" id="femail"><br><br>
  4.   <input type="submit" value="Submit">
  5.   <span>*</span>
  6. </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 -->

  1. #frm:after {
  2.   content: &quot;*&quot;;
  3. }
  5. #frm:has(#femail:invalid):after {
  6.   background: red;
  7. }
  9. #frm:has(#femail:valid):after {
  10.   background: rgb(3, 183, 168);
  11. }

<!-- language: lang-html -->

  1. &lt;form action=&quot;?&quot; id=&quot;frm&quot;&gt;
  2.   &lt;label for=&quot;fname&quot;&gt;Email:&lt;/label&gt;&lt;br&gt;
  3.   &lt;input required type=&quot;email&quot; id=&quot;femail&quot;&gt;&lt;br&gt;&lt;br&gt;
  4.   &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
  5. &lt;/form&gt;

<!-- end snippet -->

Or simply replace :after in &lt;form&gt; with, say, &lt;span&gt;*&lt;/span&gt;:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. #femail:invalid ~ span {
  2.   background: red;
  3. }
  5. #femail:valid ~ span {
  6.   background: rgb(3, 183, 168);
  7. }

<!-- language: lang-html -->

  1. &lt;form action=&quot;?&quot; id=&quot;frm&quot;&gt;
  2.   &lt;label for=&quot;fname&quot;&gt;Email:&lt;/label&gt;&lt;br&gt;
  3.   &lt;input required type=&quot;email&quot; id=&quot;femail&quot;&gt;&lt;br&gt;&lt;br&gt;
  4.   &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
  5.   &lt;span&gt;*&lt;/span&gt;
  6. &lt;/form&gt;

<!-- end snippet -->

答案2

得分: 1

  1. input:valid + span::after {
  2.   content: &quot;&quot;;
  3.   background: red;
  4. }
英文:

Replace ::after with span

  1. &lt;form action=&quot;/action_page.php&quot; id=&quot;frm&quot;&gt;
  2.     &lt;label for=&quot;fname&quot;&gt;First name:&lt;/label&gt;&lt;br&gt;
  3.     &lt;input required type=&quot;text&quot; id=&quot;fname&quot; value=&quot;&quot;&gt;&lt;br&gt;&lt;br&gt;
  4.     &lt;span&gt;span&lt;/span&gt;
  5.     &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
  6. &lt;/form&gt;
  1. input:valid + span::after {
  2.   content: &quot;&quot;;
  3.   background: red;
  4. }

huangapple
  • 本文由 发表于 2023年6月25日 21:12:41
  • 转载请务必保留本文链接：https://go.coder-hub.com/76550575.html
  • css
  • element
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定