Input text field with only bottom border

html css border html-input
amrjo picture amrjo · May 26, 2016 · Viewed 73.9k times · Source

How do I style the text input field to make it only have a border-bottom like this one?

Expected Text Input Field

SS

Answer

dippas picture dippas · May 26, 2016

Use outline:0 for chrome.. and then just set border-bottom as you like

input {
  outline: 0;
  border-width: 0 0 2px;
  border-color: blue
}
input:focus {
  border-color: green
}
<input placeholder="Text" type="text" />

Related questions

Placing border inside of div and not on its edge

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what …

Read More
How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More
How to increase space between dotted border dots

I am using dotted style border in my box like .box { width: 300px; height: 200px; border: dotted 1px #f00; float: left; } I want to the increase the space between each dot of the border.

Read More