下枠のみのテキスト入力フィールド

Question

テキストinputフィールドのスタイルを設定すると、このようなborder-bottomのみが表示されます。

予想されるテキストInputフィールド

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

使用outline:0クロムのための...その後、ちょうどあなたが好きなようにborder-bottomを設定

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

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

Answer 4

は、テキスト/入力ボックスの周囲に境界線（アウトライン）を削除する[方法のこの

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

}