カスタム入力スタイリング

Question

私は画像1のような入力フィールドを作りたいと思っていますが、現在は画像2の灰色の枠線で詰まっています...アウトライン：none、outline-width：0を使ってみました。イメージ1のようなことをするためにアウトラインを取り除く...すべての助けは非常に高く評価されるだろう！

IMG 1

IMG 2

Answer 1

てみてくださいborder: noneとborder-color: transparent

サンプル

input { 
 
    border: none; 
 
    border-color: transparent; 
 
    background-color: #d1d1d1; 
 
}

<input type="text" placeholder="Enter text here">

Answer 2

境界線を削除するには、単にCSSプロパティボーダー使用：使用する

border: 0; 

Answer 3

input { 
 
    border: none; 
 
    border-bottom:1px solid #000; 
 
    background-color: transparent; 
 
    color:#000; 
 
} 
 
input:focus { 
 

 
    outline:none; 
 
}

<input type="text" placeholder="First Name">

Answer 4

border:none 

このトリックを行う可能性があります！