Need to remove the border on a email form element-CodePudding

I am trying to put an effect on this email input so that when it is clicked on, it has a red border, but it has a problem where a white border also appears as well, and I want to remove this.

the code is:

  <form action="#">
    <input type="email" name="email" required placeholder="Your Email"/>
    <input type="submit" name="submit" value="Subscribe"/>
  </form>

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

            &:focus{
                border:4px solid red;
            } 
        }

CodePudding user response：

[type="email"]:focus{
            outline:none;
            border:4px solid red;
        }

It will also remove the default white border and keep your custom red border when the input is focused.

Hope this helps!! Cheers!