読み取り専用テキストボックスを作る方法
読み取り専用テキストボックスをHTMLとCSSで作る方法を紹介します。このサンプルでは、HTMLのreadonly属性を使用し、表示されている内容を利用者が書き換えられないテキストボックスを実装します。入力欄をクリックして文字を選択したり、コピーしたりすることはできますが、文字の追加や削除はできません。
読み取り専用の入力欄は、注文番号、会員番号、登録済みメールアドレス、システムが自動発行したコードなど、内容を確認・コピーさせたい一方で編集はさせたくない場面に適しています。お問い合わせ画面、会員サイト、ECサイトの注文情報、管理画面などで利用しやすい形式です。
サンプルはHTMLとCSSの2ファイルで構成し、JavaScriptや外部ライブラリは使用しません。HTMLではタイトル、説明文、ラベル、表示する値を変更でき、CSSでは入力欄の背景色、文字色、枠線、角丸、余白を調整できます。画面幅に合わせて縮小されるため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
注文番号は変更できませんが、選択してコピーできます。
注文番号をクリックしても内容は編集できません。文字の選択やコピーは行えます。
コードをコピーして使おう！
<!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="readonly-textbox_wrap">
<!-- タイトル -->
<h1 class="readonly-textbox_title">
注文情報
</h1>
<!-- 説明文 -->
<p class="readonly-textbox_text">
注文番号は変更できませんが、選択してコピーできます。
</p>
<!-- 注文番号のラベル -->
<label
class="readonly-textbox_label"
for="order-number">
注文番号
</label>
<!-- 読み取り専用のテキストボックス -->
<input
class="readonly-textbox_input"
id="order-number"
name="order-number"
type="text"
value="ORDER-20260724-001"
readonly>
</div>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSのみで構成された、読み取り専用テキストボックスのサンプルです。使用ファイルは2つだけなので、初心者でも構成を把握しやすく、そのままコピーして利用できます。HTMLでは表示する内容を設定し、CSSでは見た目やレイアウトを調整します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
読み取り専用テキストボックスを配置します。タイトル、説明文、ラベル、表示する値を編集できます。readonly属性を付けることで、入力はできず内容の選択やコピーのみ可能になります。
style.css
テキストボックスの背景色、文字色、枠線、角丸、余白、横幅などのデザインを設定します。読み取り専用らしい見た目へ変更したい場合はこのファイルを編集します。
設置方法・使い方
sampleフォルダ内のindex.htmlをブラウザで開くと動作を確認できます。表示内容を変更したい場合はindex.htmlのvalue属性を書き換えるだけで反映されます。利用者は内容を編集できませんが、クリックして文字を選択したりコピーしたりできます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、表示する文字列を変更できます。style.cssではテキストボックスの横幅、背景色、文字色、枠線、角丸、余白、文字サイズなどを自由に調整できます。
数値調整
style.css
・max-width:700px;
テキストボックス全体の最大横幅です。値を大きくすると横長になり、小さくするとコンパクトになります。
・padding:32px;
コンテナ内側の余白です。値を大きくすると余白が広くなります。
・font-size:22px;
タイトルの文字サイズです。値を変更するとタイトルの大きさが変わります。
・font-size:16px;
ラベルやテキストボックス内の文字サイズです。値を変更すると表示文字の大きさが変わります。
・border-radius:8px;
テキストボックスの角丸です。値を大きくすると丸みが強くなります。
・transition:0.3s;
フォーカス時の色変化にかかる時間です。0.3秒で変化し、値を大きくするとゆっくり、小さくすると速くなります。
レスポンシブ対応
style.cssではwidth:100%とmax-widthを使用しているため、画面幅に応じて自動で縮小表示されます。また、640px以下ではpaddingを調整し、スマートフォン・タブレット・PCでもレイアウトが崩れにくい構成になっています。
コメント