rusty bit
rusty bit

Reputation: 371

custom html input box on focus issue

I am trying to develop a HTML input box like the below image:

Normal input.

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?
enter image description here

Upvotes: 5

Views: 2345

Answers (5)

Minal Chauhan
Minal Chauhan

Reputation: 6148

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

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

Upvotes: 0

Munawir
Munawir

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

Mohideen bin Mohammed
Mohideen bin Mohammed

Reputation: 20137

Simply add

outline:0;

or

outline:none;

in your css :)

Upvotes: 1

Luke
Luke

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

StudioTime
StudioTime

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

Related Questions