Reputation: 371
I am trying to develop a HTML input box like the below image:
I made it 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>
ISSUE:
Here when I focus the input box, and start entering text a blue border is appearing around the input box as shown in below image.
I have to remove this blue border box. How to do it?
Upvotes: 5
Views: 2345
Reputation: 6148
Added outline:0
or outline:none
on input[type="text"]:focus
in your css.
input[type="text"]:focus{
outline:none
}
Upvotes: 0
Reputation: 3356
Remove the white space between input[type=text]
and :focus
And add outline: none;
to 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>
Upvotes: 2
Reputation: 20137
Simply add
outline:0;
or
outline:none;
in your css :)
Upvotes: 1
Reputation: 2168
Add outline: none;
to your CSS, in input:focus
Please 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! :)
Upvotes: 2
Reputation: 23989
Add outline: 0
to your css
input[type=text] :focus
{
border: none;
border-bottom: 1px dashed #D9FFA9;
outline: 0;
}
I will add that this is there for a purpose and shows a user when the input is focused - It's good practice to style it (change color for example), not remove it
Upvotes: 2