user687554 user687554 - 1 month ago 18
CSS Question

Bootstrap - Remove Input Control lines

I have a web page that uses Bootstrap 3. In this page, I have an input field. I am trying to make it so only the bottom border of the input field is visible. However, as you can see in this Fiddle I've created, I've been unable to remove the left, right, and top borders. Currently, I'm using the following CSS:

.my-input-field {
border-top:0px;
border-right:0px;
border-left:0px;
border-bottom:1px solid #2d2d2d;
outline:none;
}

.my-input-field:focus {
outline:none;
}


But, there is still a slight shadow or something around the input box. How do I remove that shadow or border around the control. I can't figure out what it is or what's causing it.

Thank you for your help.

Answer

Add box-shadow:none;, this solve your problem because the border that you see is just a CSS3 shadow and not a solid border.

Updated DEMO.

If you want to know more about box-shadow read this.

Comments