0

The textbox border-style is initialized to none. But onfocus the border appears on the textBox. So, how to avoid the border appearance?

input[type="text"]{
  
   border-style : none;
   box-shadow :  0 0 0 0;
   height : 3em;
   width : 20em;
 }

::-webkit-input-placeholder { 
  font-size : 16pt;
}

::-moz-placeholder { 
  font-size : 16pt;
}
<label for='text'>Enter some text</label><br>

<input type="text" placeholder="Enter text here">
YSuraj
  • 417
  • 5
  • 17

2 Answers2

1

Here you have the way, outline : none; should be added to achive that:

input[type="text"]{
  
   border-style : none;
   box-shadow :  0 0 0 0;
   height : 3em;
   width : 20em;
   outline : none;
 }

::-webkit-input-placeholder { 
  font-size : 16pt;
}

::-moz-placeholder { 
  font-size : 16pt;
}
<label for='text'>Enter some text</label><br>

<input type="text" placeholder="Enter text here">
Facundo La Rocca
  • 3,786
  • 2
  • 25
  • 47
1

Set outline to none for this.

input:focus{
    outline: none;
}

Sample snippet.

<!DOCTYPE html>
<html>

<head>
    <style>
        input {
            border: none;
        }
        
        input:focus {
            outline: none;
        }
    </style>
</head>

<body style="font-family:sans-serif">
    <label for='text'>Enter some text</label>
    <br>

    <input type="text" placeholder="Enter text here">
</body>

</html>
Nitheesh
  • 19,238
  • 3
  • 22
  • 49