下線だけのシンプルなテキストボックスを作る方法

1行入力・複数行入力の切り替えや、ラベル・プレースホルダー・サイズ・色・余白・枠線などを設定して、HTML・CSSを自動生成できます。

テキストボックスの枠線を下線だけにすると、入力フォームをすっきりとした印象にできます。四角い枠線をなくすことで、入力欄の周囲に余白が生まれ、シンプルなデザインに仕上がります。

今回は、CSSのborder-bottomを使用して、下線だけのテキストボックスを作る方法を紹介します。通常時はグレーの下線を表示し、マウスを重ねると少し濃く、入力欄をクリックすると青色に変化するデザインです。

HTMLとCSSだけで実装できるため、JavaScriptは必要ありません。下線の色・太さ・入力欄の余白などもCSSから調整でき、お問い合わせフォームや会員登録フォームなど、さまざまな入力画面に応用できます。複数行入力できるテキストエリアへ変更したい場合は、下記の「ファイル構成と設置方法」で解説しています。

デモ

下線だけのテキストボックス

入力欄をクリックすると、下線の色が青色に変わります。

お名前

通常時はグレーの下線が表示され、マウスを重ねると少し濃くなります。入力欄をクリックすると下線が青色に変わり、入力位置が分かりやすくなります。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>
  <!-- 文字コードの設定 -->
  <meta charset="UTF-8">
  <!-- スマートフォンなどの画面幅に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- ページタイトル -->
  <title>下線だけのシンプルなテキストボックス</title>
  <!-- テキストボックスのCSSを読み込む -->
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- テキストボックス全体の横幅を制御する親要素 -->
  <div class="underline-text-field_container">

    <!-- 入力欄のラベル -->
    <label class="underline-text-field_label" for="underline-text-field-name">
      お名前
    </label>

    <!-- 下線だけを表示するテキストボックス -->
    <input class="underline-text-field_input" id="underline-text-field-name" name="name" type="text" placeholder="お名前を入力してください">

  </div>

</body>
</html>

/* =========================================
  テキストボックス全体の横幅
========================================= */

.underline-text-field_container {
  width: 100%; /* 設置先の横幅に合わせて表示する */
  max-width: 700px; /* 最大横幅。大きくすると入力欄が横に広がる */
  margin: 40px auto; /* 上下40pxの余白。左右中央に配置する */
  box-sizing: border-box; /* 余白や枠線を横幅に含める */
  font-family: sans-serif; /* 入力欄とラベルのフォント */
}

/* =========================================
  入力欄のラベル
========================================= */

.underline-text-field_label {
  display: block; /* ラベルを1行のブロックとして表示する */
  margin-bottom: 10px; /* 入力欄との間隔。大きくすると間隔が広がる */
  color: #111827; /* ラベルの文字色 */
  font-size: 16px; /* ラベルの文字サイズ */
  font-weight: 700; /* ラベルの文字の太さ */
  line-height: 1.5; /* ラベルの行の高さ */
}

/* =========================================
  下線だけのテキストボックス
========================================= */

.underline-text-field_input {
  display: block; /* 入力欄をブロック要素として表示する */
  width: 100%; /* 親要素の横幅いっぱいに表示する */
  margin: 0; /* ブラウザ標準の外側余白をなくす */
  padding: 14px 0; /* 上下14pxの内側余白。大きくすると入力欄が縦に広がる */
  border: 0; /* 上下左右の標準の枠線をなくす */
  border-bottom: 2px solid #cbd5e1; /* 下線の太さ・種類・色 */
  border-radius: 0; /* 角丸をなくす */
  background: transparent; /* 背景を透明にする */
  background-image: none; /* ブラウザやテーマの背景画像をなくす */
  box-shadow: none; /* 標準の影をなくす */
  color: #111827; /* 入力文字の色 */
  font-family: inherit; /* 親要素のフォントを引き継ぐ */
  font-size: 16px; /* 入力文字のサイズ */
  line-height: 1.5; /* 入力文字の行の高さ */
  appearance: none; /* ブラウザ標準の装飾をなくす */
  -webkit-appearance: none; /* Safariなどの標準装飾をなくす */
  box-sizing: border-box; /* 内側余白と枠線を横幅に含める */
  outline: none; /* 標準のフォーカス枠をなくす */
  transition: border-bottom-color .3s ease; /* 下線の色を0.3秒かけて変化させる */
}

/* =========================================
  マウスを重ねたときの表示
========================================= */

.underline-text-field_input:hover {
  border: 0; /* 標準の枠線をなくす */
  border-bottom: 2px solid #94a3b8; /* 下線を少し濃いグレーに変更する */
  border-radius: 0; /* 角丸をなくす */
  background: transparent; /* 背景を透明に保つ */
  box-shadow: none; /* 影を表示しない */
}

/* =========================================
  フォーカス時の表示
========================================= */

.underline-text-field_input:focus {
  border: 0; /* 標準の枠線をなくす */
  border-bottom: 2px solid #2563eb; /* 下線を青色に変更する */
  border-radius: 0; /* 角丸をなくす */
  background: transparent; /* 背景を透明に保つ */
  background-image: none; /* 背景画像を表示しない */
  box-shadow: none; /* 影を表示しない */
  outline: none; /* 標準のフォーカス枠を表示しない */
}

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下では入力欄の上下余白を調整する */
  .underline-text-field_input {
    padding: 13px 0; /* 上下13px。小さくすると入力欄がコンパクトになる */
  }

}

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

今回のサンプルは、HTMLとCSSの2つのファイルで構成されています。HTMLではお名前を入力するテキストボックスを設置し、CSSでは上下左右の枠線をなくして下線だけを表示しています。マウスを重ねたときや入力欄をクリックしたときの下線の色も、CSSだけで切り替えています。

sample/
  ├── index.html
  └── style.css

各ファイルの役割
index.htmlには、お名前を入力するためのinput要素と、入力欄の項目名を示すlabel要素を記述しています。style.cssでは、入力欄の横幅・余白・文字サイズ・下線の太さや色、マウス操作による色の変化などを設定しています。

設置方法・使い方
「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.htmlとstyle.cssを同じ階層に配置し、index.htmlをブラウザで開くと、下線だけのテキストボックスが表示されます。
通常時は薄いグレーの下線が表示され、マウスを重ねると少し濃いグレーに変わります。入力欄をクリックすると下線が青色に変化し、そのまま文字を入力できます。

下線だけを表示する仕組み
style.cssの.underline-text-field_inputでは、border: 0;で標準の枠線をなくし、border-bottomで下側だけに線を表示しています。

/* =========================================
  下線だけのテキストボックス
========================================= */

.underline-text-field_input {
  display: block; /* 入力欄をブロック要素として表示する */
  width: 100%; /* 親要素の横幅いっぱいに表示する */
  margin: 0; /* ブラウザ標準の外側余白をなくす */
  padding: 14px 0; /* 上下14pxの内側余白。大きくすると入力欄が縦に広がる */
  border: 0; /* 上下左右の標準の枠線をなくす */
  border-bottom: 2px solid #cbd5e1; /* 下線の太さ・種類・色 */
  border-radius: 0; /* 角丸をなくす */
  background: transparent; /* 背景を透明にする */
  background-image: none; /* ブラウザやテーマの背景画像をなくす */
  box-shadow: none; /* 標準の影をなくす */
  color: #111827; /* 入力文字の色 */
  font-family: inherit; /* 親要素のフォントを引き継ぐ */
  font-size: 16px; /* 入力文字のサイズ */
  line-height: 1.5; /* 入力文字の行の高さ */
  appearance: none; /* ブラウザ標準の装飾をなくす */
  -webkit-appearance: none; /* Safariなどの標準装飾をなくす */
  box-sizing: border-box; /* 内側余白と枠線を横幅に含める */
  outline: none; /* 標準のフォーカス枠をなくす */
  transition: border-bottom-color .3s ease; /* 下線の色を0.3秒かけて変化させる */
}

border-bottom: 2px solid #cbd5e1;の2pxは下線の太さ、solidは実線、#cbd5e1は下線の色です。太さを1pxにすると細く、3pxにすると太くなります。
padding: 14px 0;は入力欄の上下に14pxの余白を設ける設定です。数値を大きくすると入力欄が縦に広がり、小さくするとコンパクトになります。background: transparent;によって背景を透明にし、下線だけが目立つデザインにしています。

マウス操作による下線の色の変化
マウスを重ねたときは:hover、入力欄が選択されているときは:focusを使用して、下線の色を切り替えています。

/* =========================================
  マウスを重ねたときの表示
========================================= */

.underline-text-field_input:hover {
  border: 0; /* 標準の枠線をなくす */
  border-bottom: 2px solid #94a3b8; /* 下線を少し濃いグレーに変更する */
  border-radius: 0; /* 角丸をなくす */
  background: transparent; /* 背景を透明に保つ */
  box-shadow: none; /* 影を表示しない */
}

/* =========================================
  フォーカス時の表示
========================================= */

.underline-text-field_input:focus {
  border: 0; /* 標準の枠線をなくす */
  border-bottom: 2px solid #2563eb; /* 下線を青色に変更する */
  border-radius: 0; /* 角丸をなくす */
  background: transparent; /* 背景を透明に保つ */
  background-image: none; /* 背景画像を表示しない */
  box-shadow: none; /* 影を表示しない */
  outline: none; /* 標準のフォーカス枠を表示しない */
}

通常時の下線は#cbd5e1、マウスを重ねたときは#94a3b8、フォーカス時は#2563ebに設定しています。それぞれの色コードを変更すると、好みの配色にできます。
また、transition: border-bottom-color .3s ease;によって、下線の色が0.3秒かけて滑らかに変化します。.3sを.5sにすると変化がゆっくりになり、0sにすると瞬時に切り替わります。

入力した文字列を取得する方法
テキストボックスに入力した文字列は、JavaScriptのvalueプロパティで取得できます。今回のHTMLでは、入力欄にid="underline-text-field-name"を設定しています。
次のコードは入力値の取得方法を説明するための例であり、ダウンロードするZIPには含まれていません。

// テキストボックスの要素を取得
const textField = document.getElementById("underline-text-field-name");

// 入力した文字列を変数へ代入
const inputValue = textField.value;

document.getElementById()でテキストボックスを取得し、textField.valueを変数inputValueへ代入しています。取得される値は文字列（string）です。例えば「山田太郎」と入力されている場合、inputValueには"山田太郎"が入ります。何も入力されていない場合は空文字列""になります。
このコードは実行した時点の入力値を取得します。入力内容が変更されるたびに最新の値を取得したい場合は、inputイベントを使用します。

// テキストボックスの要素を取得
const textField = document.getElementById("underline-text-field-name");

// 文字が入力・削除されるたびに値を取得
textField.addEventListener("input", () => {

  // 現在の入力値を変数へ代入
  const inputValue = textField.value;

  // 取得した文字列をコンソールに表示
  console.log(inputValue);

});

このコードを使用する場合は、index.htmlの</body>の直前に<script>要素を追加し、その中へ記述してください。文字を入力・削除するたびにinputValueへ最新の文字列が代入され、ブラウザの開発者ツールのコンソールへ表示されます。
取得した文字列は、入力内容の確認や別の処理への受け渡しなどに利用できます。なお、このJavaScriptは説明用の追加例であり、下線デザインの表示には必要ありません。

テキストエリアへ変更する方法
1行入力のテキストボックスを複数行入力できるテキストエリアに変更する場合は、index.htmlのinput要素をtextarea要素へ置き換えます。
変更前のHTMLは次のとおりです。

<!-- 下線だけを表示するテキストボックス -->
<input class="underline-text-field_input" id="underline-text-field-name" name="name" type="text" placeholder="お名前を入力してください">

複数行入力に変更する場合は、次のように書き換えます。

<!-- 下線だけを表示するテキストエリア -->
<textarea class="underline-text-field_input" id="underline-text-field-name" name="name" rows="4" placeholder="お名前を入力してください"></textarea>

textarea要素にはtype="text"を指定しません。rows="4"は表示する行数の目安で、数値を変更すると初期状態の高さを調整できます。textareaでは改行を含む複数行の文字列を入力でき、入力した内容はテキストボックスと同じvalueプロパティで取得できます。
なお、掲載しているCSSは.underline-text-field_inputを使用しているため、同じクラス名を指定すれば下線の色や余白などの基本スタイルを引き継げます。ただし、テキストエリアにはブラウザ標準の高さやサイズ変更機能があるため、必要に応じて追加の調整を行ってください。

テキストエリアの高さとサイズ変更を調整する方法
テキストエリアの高さを指定し、利用者によるサイズ変更を縦方向だけに制限したい場合は、style.cssの末尾に次のCSSを追加します。

/* =========================================
  テキストエリアへ変更した場合の追加設定
========================================= */

textarea.underline-text-field_input {
  min-height: 120px; /* 最小の高さ。大きくすると入力欄が縦に広がる */
  resize: vertical; /* 縦方向のみサイズ変更を許可する */
}

min-height: 120px;はテキストエリアの最小の高さを指定しています。160pxにすると入力欄が縦に広がり、80pxにするとコンパクトになります。
resize: vertical;では、利用者がテキストエリアの高さだけを変更できます。サイズ変更を禁止したい場合はresize: none;に変更してください。

レスポンシブ対応
style.cssでは、親要素の.underline-text-field_containerにwidth: 100%;とmax-width: 700px;を設定しています。これにより、広い画面では最大700pxまで表示し、狭い画面では設置先の横幅に合わせて縮小します。
margin: 40px auto;で中央に配置し、上下に40pxの余白を設けています。max-widthの数値を変更すると、入力欄全体の最大横幅を調整できます。

/* =========================================
  スマートフォン対応
========================================= */

@media (max-width: 640px) {

  /* 画面幅640px以下では入力欄の上下余白を調整する */
  .underline-text-field_input {
    padding: 13px 0; /* 上下13px。小さくすると入力欄がコンパクトになる */
  }

}

画面幅が640px以下になると、入力欄の上下余白を14pxから13pxへ変更します。左右の余白は0のままなので、文字の開始位置と下線の左端が揃います。PCとスマートフォンで同じ余白にしたい場合は、このメディアクエリを削除しても構いません。