CSS code for changing appearance of an email form element if format is not valid-CodePudding

I want to change the appearance of this email form element when the inserted email address does not match the pattern which I stated, but I am not sure what to use, I tried using :invalid but I'm not sure if it works or not, so I would like to hear from you guys.

The code is:

<input type="email" name="email" required placeholder="Your Email" pattern="[a-zA-Z1-9] @[a-zA-Z1-9] \.[a-zA-Z]{2,}"/>

        [type="email"]{
            padding:.7rem;
            border-radius:.3rem;
            border:none;
            margin-right:2rem;

            &:invalid{
                outline:none;
                border:1px solid red;
            } 
        }

CodePudding user response：

You should add "input" after [type="email"] example: input[type="email"] and I tried it and everything is alright

input[type="email"]:invalid {
    border: 1px solid red;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
      <input type="email" name="email" required placeholder="Your Email" pattern="[a-zA-Z1-9] @[a-zA-Z1-9] \.[a-zA-Z]{2,}"/>
    </body>
</html>

CodePudding user response：

You can do this

<!DOCTYPE html>
<html lang="en">

    <head>
        
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <style>
            input:valid {
                background-color: palegreen;
            }

            input:invalid {
                background-color: lightpink;
            }

            input {
                display: block;
            }

        </style>

    </head>

    <body>

        <label for="emailA">With no character:</label>
        <input type="email" name="emailA" pattern="[a-zA-Z1-9] @[a-zA-Z1-9] \.[a-zA-Z]{2,}" required />

        <label for="emailB">With good email:</label>
        <input type="email" name="emailB" pattern="[a-zA-Z1-9] @[a-zA-Z1-9] \.[a-zA-Z]{2,}" value="[email protected]" required />

        <label for="emailC">With bad email:</label>
        <input type="email" name="emailC" pattern="[a-zA-Z1-9] @[a-zA-Z1-9] \.[a-zA-Z]{2,}" value="badmail@@example.com" required />
    
    </body>

</html>