Input text field with only bottom border

Question

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

Expected Text Input Field

dippas · Answer 1 · 2018-04-29T10:28:20.200

53

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" />

edited Apr 29 '18 at 10:28

answered May 26 '16 at 15:45

dippas

52,735
15
110
120

2

Problem here is that if you do this you may break accessibility standards. From the docs: "Assigning outline a value of 0 or none will remove the browser's default focus style. If an element can be interacted with, it must have a visible focus indicator. Provide obvious focus styling if the default focus style is removed." https://developer.mozilla.org/en-US/docs/Web/CSS/outline#Accessibility_concerns – Micah Bales Jul 11 '19 at 15:42
@MicahBales you can fix with this: ```input:focus { border-color: green; outline: 1px dotted #000 //whatever you like }``` – dippas Jul 11 '19 at 15:55

nos nart · Answer 2 · 2020-01-09T07:18:02.230

30

Try this one

.inp {
    border:none;
    border-bottom: 1px solid #1890ff;
    padding: 5px 10px;
    outline: none;
 }

[placeholder]:focus::-webkit-input-placeholder {
    transition: text-indent 0.4s 0.4s ease; 
    text-indent: -100%;
    opacity: 1;
 }

<input class="inp" placeholder="What needs to be done?"/>

edited Jan 09 '20 at 07:18

answered Jun 05 '19 at 03:57

nos nart

1,406
1
10
21

@dippas you can add more browser CSS extension for example [Mozilla CSS extensions](https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions) – nos nart Feb 26 '21 at 02:38

score 13 · Answer 3 · answered May 26 '16 at 15:44

13

input {
    border: 0;
    outline: 0;
    border-bottom: 2px solid blue;
}

answered May 26 '16 at 15:44

Daniel Diekmeier

2,996
15
32

score 5 · Answer 4 · answered May 26 '16 at 15:44

5

#input_Id{
   border:0px;
   border-bottom:2px solid #eee;
}

answered May 26 '16 at 15:44

AsgarAli

2,165
1
19
32

score 2 · Answer 5 · answered Oct 18 '19 at 10:29

2

input {
  border: 0;
  outline: 0;
  border-bottom: 2px solid #03a8f45e;
  font-size: 1.4rem;
  color: #ccc;
        
}

<input placeholder="Enter search query" type="text" name="fname" autofocus />

answered Oct 18 '19 at 10:29

Kondal

2,633
4
23
39

Input text field with only bottom border

5 Answers5

Linked