クリアボタン付きテキストボックスを作る方法
クリアボタン付きテキストボックスを作る方法を紹介します。入力欄へ文字を入力するとクリアボタンが表示され、クリックすると入力内容をまとめて削除できるサンプルです。HTML・CSS・JavaScriptだけで実装できるため、フォーム機能へ簡単に組み込めます。
お問い合わせフォームや会員登録画面、検索フォーム、管理画面などでは、一度入力した内容をすぐに消したい場面があります。このサンプルでは、入力欄が空のときはクリアボタンを非表示にし、文字が入力されたときだけ表示するため、実際のWebサイトでも使いやすい自然な動作を実現できます。
ボタンの色やサイズ、アイコン表示の有無、テキストボックスのデザインなどはコード内から自由に変更できます。初心者でも導入しやすく、コピペして利用しやすいクリアボタン付きテキストボックスの作り方を探している方におすすめです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
入力欄右端の×をクリックすると、入力されているキーワードをすべて削除できます。
コードをコピーして使おう！
<!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="clear-button-textbox_wrap">
<!-- タイトル -->
<h1 class="clear-button-textbox_title">
キーワード検索
</h1>
<!-- 説明文 -->
<p class="clear-button-textbox_text">
入力欄右端の×をクリックすると、入力内容をまとめて削除できます。
</p>
<!-- キーワード入力欄のラベル -->
<label
class="clear-button-textbox_label"
for="search-keyword">
キーワード
</label>
<!-- テキストボックスとクリアボタンを配置するエリア -->
<div class="clear-button-textbox_box">
<!-- キーワードを入力するテキストボックス -->
<input
class="clear-button-textbox_input"
id="search-keyword"
name="search-keyword"
type="text"
value="×クリックで削除できます。"
placeholder="キーワードを入力してください">
<!-- 入力内容を削除するクリアボタン -->
<button
class="clear-button-textbox_clear"
id="clear-button"
type="button"
aria-label="入力内容を削除">
<span
class="clear-button-textbox_clear-mark"
aria-hidden="true">×</span>
</button>
</div>
</div>
<!-- JavaScriptファイルを読み込み -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。テキストボックスへ入力したキーワードを、右側のクリアボタン（×）をクリックするだけで削除できるシンプルな入力フォームです。JavaScriptは入力内容を空にして再度入力できる状態へ戻す処理のみを行うため、初心者でも構造を理解しやすく、既存のフォームへ組み込みやすくなっています。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.html
キーワード入力欄、クリアボタン、タイトル、説明文を配置しています。タイトルやラベル、プレースホルダーなどを変更できます。
style.css
テキストボックス、クリアボタン、文字サイズ、余白、色、角丸などのデザインを管理しています。入力欄やクリアボタンの見た目を自由に変更できます。
script.js
クリアボタンをクリックしたときに入力内容を削除し、入力欄へフォーカスを戻す処理を行います。
設置方法・使い方
sampleフォルダへ3ファイルを配置します。
ブラウザで sample/index.html を開くと利用できます。
テキストボックスへ文字を入力し、右側の×をクリックすると入力内容を削除できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、初期値、プレースホルダーを変更できます。
style.cssでは入力欄の幅、高さ、背景色、文字色、枠線、角丸、クリアボタンのサイズや色、配置位置を変更できます。
script.jsではクリック後の動作やフォーカス処理を変更できます。
数値調整
style.css
max-width:700px;
フォーム全体の最大横幅です。値を大きくすると横幅が広くなり、小さくするとコンパクトになります。
height:48px;
テキストボックスの高さです。値を大きくすると入力欄が高くなり、小さくすると低くなります。
padding:12px 46px 12px 14px;
テキストボックスの内側余白です。右側の46pxはクリアボタンと重ならないための余白です。
width:24px; / height:24px;
クリアボタンのサイズです。値を変更するとクリックできる範囲が変わります。
font-size:22px;
×マークの文字サイズです。値を大きくすると×が大きく表示され、小さくすると控えめな表示になります。
right:12px;
クリアボタンの右端からの位置です。値を変更するとボタンの配置位置が変わります。
transition:color .3s ease;
0.3秒で文字色を切り替えます。値を大きくするとゆっくり、小さくすると速く切り替わります。
レスポンシブ対応
style.cssでレスポンシブ対応しています。width:100%、max-width:700px、@media (max-width:640px)を使用し、画面幅に応じてフォームの横幅や余白を自動調整します。スマートフォン・タブレット・PCで利用できます。
コメント