Eingabe Textfeld mit nur unteren Rand

Question

Wie style ich den Text input Feld, um es nur eine border-bottom wie diese zu haben?

Erwartete Text Input Feld

Answer 1

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

Answer 2

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

Answer 3

Verwenden outline:0 für Chrom .. und dann setzen gerade border-bottom, wie Sie mögen

input { 
 
    outline: 0; 
 
    border-width: 0 0 2px 0; 
 
    border-color: blue 
 
} 
 
input:focus { 
 
    border-color: green 
 
}

<input placeholder="Text" type="text" />

Answer 4

können Sie diese versuchen

.form-group input { 

    display: block; 
    background: none; 
    padding: 0.175rem 0.175rem 0.0875rem; 
    font-size: 1.4rem; 
    border-width: 0; 
    border-color: transparent; 
    line-height: 1.9; 
    width: 100%; 
    color: #ccc; 
    transition: all 0.28s ease; 
    box-shadow: none; 

}