All geek questions in one place

Custom html input field on focus issue

I am trying to create an HTML input field as shown below:

Regular input .

I did this using the following code:

input[type=text] { background: transparent; border: none; border-bottom: 1px solid #000000; padding: 2px 5px; } input[type=text]:focus { border: none; border-bottom: 1px dashed #D9FFA9; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> Name : <input type="text" /> </body> </html>

QUESTION:
Here, when I focus the input field and start typing, a blue frame appears around the input window, as shown in the figure below.

I need to remove this blue frame. How to do it?
enter image description here

+5
source share
5 answers

Add outline: 0 to your css

 input[type=text] :focus { border: none; border-bottom: 1px dashed #D9FFA9; outline: 0; }

I will add that this exists for a specific purpose and shows the user when the input is focused. It’s good practice to stylize it (for example, change the color) rather than delete it.

+2
source

Add outline: none; to your CSS, in input:focus Note that input[type=text]: focus should be input[type=text]:focus .

See the updated snippet here:

 input[type=text] { background: transparent; border: none; border-bottom: 1px solid #000000; padding: 2px 5px; } input[type=text]:focus { border: none; border-bottom: 1px dashed #D9FFA9; outline: none; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> Name : <input type="text" /> </body> </html>

Hope this helps! :)

+2
source

Remove the space between input[type=text] and :focus

And add outline: none; in input[type=text]:focus

 input[type=text] { background: transparent; border: none; border-bottom: 1px solid #000000; padding: 2px 5px; } input[type=text]:focus { border: none; border-bottom: 1px dashed #D9FFA9; outline: none; } 
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> Name : <input type="text" /> </body> </html>
+2
source

Just add

 outline:0;

or

 outline:none;

in your css :)

+1
source

Added outline:0 or outline:none to input[type="text"]:focus in your css.

 input[type="text"]:focus{ outline:none }
0
source

Source: https://habr.com/ru/post/1243448/

More articles:


All Articles