下線だけのテキストボックスを作る方法【HTML/CSS・サンプルコード付き】

下線だけのテキストボックスを作る方法

下線だけのテキストボックスを作る方法を紹介します。通常の枠線付き入力欄ではなく、下線のみを表示するシンプルなデザインのテキストボックスです。フォーム全体をすっきりと見せたい場合や、モダンなデザインを取り入れたい場面で利用できます。

このサンプルは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-textbox_wrap">

    <!-- タイトル -->
    <h1 class="underline-textbox_title">
      お名前を入力
    </h1>

    <!-- 説明文 -->
    <p class="underline-textbox_text">
      下線だけを表示したシンプルなテキストボックスです。
    </p>

    <!-- 入力エリア -->
    <div class="underline-textbox_group">

      <!-- ラベル -->
      <label
        class="underline-textbox_label"
        for="name">
        お名前
      </label>

      <!-- テキストボックス -->
      <input
        class="underline-textbox_input"
        id="name"
        name="name"
        type="text">

    </div>

  </div>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
  box-sizing:border-box; /* paddingとborderを要素サイズへ含める */
}

/* 下線だけのテキストボックス全体 */
.underline-textbox_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:720px; /* 最大横幅。900pxにすると広く、500pxにするとコンパクトになる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:48px; /* 内側余白。60pxにすると広く、32pxにすると狭くなる */
  border:1px solid #dbe5f1; /* 全体を囲む枠線の太さ・種類・色 */
  border-radius:24px; /* 全体の角丸。36pxにすると丸く、0にすると四角くなる */
  background:#f8fbff; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* 入力エリアのタイトル */
.underline-textbox_title{
  margin:0; /* タイトル外側の余白を削除 */
  color:#111827; /* タイトルの文字色 */
  font-size:48px; /* タイトルの文字サイズ。56pxにすると大きく、36pxにすると小さくなる */
  font-weight:700; /* タイトルを太字にする */
  line-height:1.5; /* タイトルの行間。値を大きくすると行間が広がる */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.underline-textbox_text{
  margin:24px 0 48px; /* 上24px・下48pxの余白。値を大きくすると周囲との間隔が広がる */
  color:#64748b; /* 説明文の文字色 */
  font-size:18px; /* 説明文の文字サイズ。20pxにすると大きく、16pxにすると小さくなる */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* ラベルと入力欄をまとめる入力エリア */
.underline-textbox_group{
  width:100%; /* 親要素の横幅いっぱいに表示 */
}

/* テキストボックスのラベル */
.underline-textbox_label{
  display:block; /* ラベルを1行で表示 */
  margin-bottom:12px; /* 下側12pxの余白。値を大きくすると入力欄との間隔が広がる */
  color:#111827; /* ラベルの文字色 */
  font-size:18px; /* ラベルの文字サイズ。20pxにすると大きくなる */
  font-weight:700; /* ラベルを太字にする */
  line-height:1.5; /* ラベルの行間 */
}

/* 下線だけのテキストボックス本体 */
.underline-textbox_input{
  display:block; /* 入力欄をブロック要素として表示 */
  width:100%; /* 親要素の横幅いっぱいに表示 */
  margin:0; /* ブラウザやテーマによる外側余白を削除 */
  padding:14px 0; /* 上下14px・左右0。上下を大きくすると入力欄が高くなる */
  border:none !important; /* 上・右・左の枠線を強制的に非表示 */
  border-bottom:2px solid #cbd5e1 !important; /* 下線の太さ・種類・色。2pxを大きくすると線が太くなる */
  border-radius:0 !important; /* 角丸を強制的に削除して直線的なデザインにする */
  background:transparent !important; /* 入力欄の背景を透明にする */
  background-image:none !important; /* テーマなどで追加される背景画像を削除 */
  box-shadow:none !important; /* テーマなどで追加される影を削除 */
  outline:none !important; /* ブラウザ標準の外枠を非表示 */
  appearance:none; /* ブラウザ標準の入力欄デザインを抑える */
  -webkit-appearance:none; /* Safariでブラウザ標準の入力欄デザインを抑える */
  color:#111827; /* 入力文字の色 */
  font-family:inherit; /* ページ全体と同じフォントを使用 */
  font-size:18px; /* 入力文字のサイズ。20pxにすると大きく、16pxにすると小さくなる */
  line-height:1.5; /* 入力文字の行間 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
  transition:border-bottom-color 0.3s ease; /* 0.3秒で下線色を変化。0.6sにするとゆっくり、0.1sにすると速くなる */
}

/* テキストボックスへマウスを重ねた状態 */
.underline-textbox_input:hover{
  border-bottom-color:#94a3b8 !important; /* マウスを重ねた時の下線色 */
}

/* テキストボックスへフォーカスした状態 */
.underline-textbox_input:focus{
  border:none !important; /* フォーカス時も上・右・左の枠線を非表示 */
  border-bottom:3px solid #2563eb !important; /* フォーカス時の下線。3pxを大きくすると強調が強くなる */
  border-radius:0 !important; /* フォーカス時も角丸を付けない */
  background:transparent !important; /* フォーカス時も背景を透明にする */
  background-image:none !important; /* フォーカス時の背景画像を削除 */
  box-shadow:none !important; /* フォーカス時の影を削除 */
  outline:none !important; /* フォーカス時のブラウザ標準外枠を非表示 */
}

/* 画面幅640px以下 */
@media screen and (max-width:640px){

  /* スマートフォン表示時のページ全体 */
  body{
    padding:24px 12px; /* 上下24px・左右12pxへ縮小 */
  }

  /* スマートフォン表示時の全体 */
  .underline-textbox_wrap{
    margin:24px auto; /* 上下余白を24pxへ縮小 */
    padding:32px 20px; /* 上下32px・左右20pxへ縮小 */
  }

  /* スマートフォン表示時のタイトル */
  .underline-textbox_title{
    font-size:34px; /* タイトルの文字サイズを34pxへ縮小 */
  }

  /* スマートフォン表示時の説明文 */
  .underline-textbox_text{
    margin:18px 0 36px; /* 上18px・下36pxへ余白を縮小 */
    font-size:16px; /* 説明文の文字サイズを16pxへ縮小 */
  }

  /* スマートフォン表示時のラベル */
  .underline-textbox_label{
    font-size:16px; /* ラベルの文字サイズを16pxへ縮小 */
  }

  /* スマートフォン表示時のテキストボックス */
  .underline-textbox_input{
    padding:12px 0; /* 上下12px・左右0へ縮小 */
    font-size:16px; /* 入力文字のサイズを16pxへ縮小 */
  }

}

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

ファイル構成と設置方法

このサンプルはHTMLとCSSのみで作成した、下線だけを表示するシンプルなテキストボックスです。使用ファイルは2つだけなので、特別なライブラリやJavaScriptは必要ありません。HTMLで入力欄を配置し、CSSで下線デザインやフォーカス時の見た目、レスポンシブ表示を設定しています。

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

各ファイルの役割
index.htmlは入力フォーム全体を構成するファイルです。タイトルや説明文、ラベル、テキストボックスなどを編集できます。
style.cssはデザインを設定するファイルです。下線の色や太さ、文字サイズ、余白、背景色、フォーカス時の色、レスポンシブ表示などを変更できます。

設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置します。その後、sample/index.htmlをブラウザで開くとそのまま利用できます。JavaScriptや外部ライブラリは不要なため、HTMLとCSSだけで動作します。

カスタマイズできる内容
style.cssでは下線の色や太さ、入力欄の文字サイズ、余白、背景色、タイトルや説明文のデザインを変更できます。index.htmlではタイトル、説明文、ラベル名、入力欄のname属性やid属性などを用途に合わせて編集できます。

数値調整
style.cssの「border-bottom:2px」は通常時の下線の太さです。値を大きくすると下線が太くなります。
style.cssの「border-bottom:3px」は入力中の下線の太さです。値を変更するとフォーカス時の強調具合が変わります。
style.cssの「transition:border-bottom-color .3s」は下線色が切り替わる速度です。.3秒で変化し、値を大きくするとゆっくり、小さくすると速くなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのmax-widthによってPCでは横幅を制限し、画面が狭い場合はwidth:100%で自動的に縮小表示されます。また、media queryでタイトルサイズや余白、入力欄の文字サイズを調整しているため、スマートフォン・タブレット・PCでも見やすく利用できます。