Remove borders for text input on bootstrap 3

Question

I'm trying to remove top, right and left borders for text input fields, using bootstrap 3. My selector is:

input[type="text"] {
border-top: 0;
border-right: 0;
border-left: 0;

}

It's still showing (in chrome) a slight thin line.

I'm not sure how to get that ghost line to disappear

Please add your HTML to the question. – Gleb Kemarsky Jun 04 '16 at 05:02 — Gleb Kemarsky, Jun 04 '16 at 05:02

score 8 · Accepted Answer · answered Jun 04 '16 at 07:24

You did remove the border from top left and right. That "ghost line" you see, it is the inset shadow. You can remove that as well

input[type="text"] {
     border-top: 0;
     border-right: 0;
     border-left: 0;

     -webkit-box-shadow: none;
     box-shadow: none;
}

and if you want to remove that when a user "focuses" the field

input[type="text"]:focus {
     -webkit-box-shadow: none;
     box-shadow: none;
}

score 2 · Answer 2 · answered Jun 04 '16 at 06:36

2

Write this in your css file.

input {
    border: none;
}

If it is not working please share your html code.

answered Jun 04 '16 at 06:36

Priyank Dey

score 1 · Answer 3 · answered Jun 04 '16 at 05:29

1

If your form uses tags <fieldset>, try to remove their borders too:

fieldset {  
  border: 0;
}

answered Jun 04 '16 at 05:29

Gleb Kemarsky

3 Answers3