Menu
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?
603
Input Text focus() MethodThe focus() method is used to give focus to a text field. Tip: Use the blur() method to remove focus from a text field.
To set focus to an HTML form element, the focus() method of JavaScript can be used. To do so, call this method on an object of the element that is to be focused, as shown in the example. Example 1: The focus() method is set to the input tag when user clicks on Focus button.
Answer: Use CSS outline property In Google Chrome browser form controls like <input> , <textarea> and <select> highlighted with blue outline around them on focus. This is the default behavior of chrome, however if you don't like it you can easily remove this by setting their outline property to none .
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
167
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
