【CSS/html】inputテキストボックスに下線だけを引く方法

「テキストボックスの線を下線だけに引きたい！」

inputテキストボックスに下線だけを引く方法を解説します。

下線だけあるテキストボックス

↓完成イメージです。カーソルを当てたとき色が変わります。

<style>
.example{
    border: none;
    outline: none;
    border-bottom: 2px solid #999;
    padding: 5px 10px;
}
.example:focus{
    border-bottom-color: #e20000;
}
</style>
<input type="text" value="テキストボックス" class="example">

詳しい手順を下記で解説します。

線を消す

下線を引く前にもともとある線を消しましょう。

「border:none」を指定すると線を消せます。

ただしこれだけでは、inputにカーソルを当てたときに線が出てきてしまいます。

この線の正体は「outline」です。

よって「outline:none」も指定します。

下線を引く

下線は「border-bottom」で指定します。「border:none」の後に記述しましょう。

borderの値には「太さ 種類 色」を指定します。

余白を調整

余白はpaddingで指定します。

これは下線とカーソルおよび文字の隙間の調整です。

カーソルを当てたとき

カーソルを当てたとき色を変えたいという場合はセレクタに「:focus」をつけて指定します。

下線を引くと同じ方法で「border-bottom」に指定するか、下線の色を指定するCSS「border-bottom-color」を指定しましょう。