CODEWITHSUNDEEP
formstwitter-bootstrapcssinput
Mike M
Mike M

Reputation: 195

Remove borders for text input on bootstrap 3

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.

enter image description here

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

Upvotes: 6

Views: 7781

Answers (3)

tmg
tmg

Reputation: 20413

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;
}

Upvotes: 8

Priyank Dey
Priyank Dey

Reputation: 1124

Write this in your css file.

input {
    border: none;
}

If it is not working please share your html code.

Upvotes: 2

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10418

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

fieldset {  
  border: 0;
}

Upvotes: 1

Related Questions