クリアボタン付きテキストフィールドを作る方法
クリアボタン付きテキストフィールドを作る方法を紹介します。入力欄へ文字を入力するとクリアボタンが表示され、クリックすると入力内容をまとめて削除できるサンプルです。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、JavaScriptの3ファイルで構成されています。HTMLではキーワード入力用のテキストフィールドと、入力内容を削除するクリアボタンを配置します。CSSでは入力欄とクリアボタンのレイアウトや配色、余白、枠線、フォーカス時の表示を設定し、JavaScriptではクリアボタンをクリックしたときに入力内容を空にして、テキストフィールドへフォーカスを戻します。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはクリアボタン付きテキストフィールド全体を構成するファイルです。タイトル、説明文、ラベル、テキストフィールド、クリアボタンを編集できます。入力欄のvalue属性やplaceholder属性を変更することで、用途に合わせた初期表示や案内文へ変更できます。
style.cssはテキストフィールドとクリアボタンのデザインを設定するファイルです。全体の横幅、余白、背景色、文字サイズ、入力欄の高さ、枠線、角丸、クリアボタンの位置や大きさ、フォーカス時やホバー時の表示などを変更できます。
script.jsはクリアボタンをクリックしたときの処理を行うファイルです。ボタンを押すとテキストフィールドの内容を空にし、そのあと入力欄へフォーカスを戻します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。テキストフィールドへ文字を入力し、右端の×をクリックすると入力内容がまとめて削除されます。削除後はテキストフィールドへフォーカスが戻るため、そのまま続けて文字を入力できます。
カスタマイズできる内容
index.htmlではタイトル、説明文、ラベル、value属性、placeholder属性、name属性、id属性、クリアボタンの表示内容を変更できます。検索キーワード、商品番号、名前など、1行入力するさまざまな項目へ利用できます。
style.cssではフォーム全体の横幅、背景色、余白、文字サイズ、テキストフィールドの高さ、枠線、角丸、クリアボタンの大きさや配置、フォーカス時の枠線色、ホバー時のボタン色などを用途に合わせて調整できます。
数値調整
style.css
max-width:700px;
全体の最大横幅です。値を大きくすると横幅が広がり、小さくするとコンパクトになります。
padding:32px;
全体の内側余白です。値を大きくすると内容と外枠との間隔が広がり、小さくすると詰まった表示になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると控えめになります。
margin:0 0 24px;
説明文の下側余白です。24pxを大きくするとラベルとの間隔が広がり、小さくすると狭くなります。
margin-bottom:10px;
ラベルとテキストフィールドの間隔です。値を大きくすると上下の間隔が広がり、小さくすると近づきます。
height:48px;
テキストフィールドの高さです。値を大きくすると入力欄が高くなり、小さくすると低くなります。
padding:12px 46px 12px 14px;
テキストフィールドの内側余白です。右側の46pxはクリアボタンを配置するための余白です。値を大きくすると文字とボタンの間隔が広がり、小さくすると近づきます。
border:2px solid #cbd5e1;
テキストフィールドの枠線です。2pxを大きくすると枠線が太くなり、小さくすると細くなります。
border-radius:8px;
テキストフィールドの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
right:12px;
クリアボタンをテキストフィールドの右端から配置する位置です。値を大きくすると左方向へ移動し、小さくすると右端へ近づきます。
width:24px;
クリアボタンの横幅です。値を大きくするとクリックできる領域が広がり、小さくすると狭くなります。
height:24px;
クリアボタンの高さです。値を大きくするとクリックできる領域が高くなり、小さくすると低くなります。
font-size:22px;
クリアボタン内に表示する×の文字サイズです。値を大きくすると×が大きくなり、小さくすると小さくなります。
transition:border-color .3s ease;
テキストフィールドの枠線色が切り替わる時間です。.3sを大きくするとゆっくり変化し、小さくすると速く変化します。
transition:color .3s ease;
クリアボタンの文字色が切り替わる時間です。.3sを大きくするとゆっくり変化し、小さくすると速く変化します。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxによって画面幅に合わせて全体が縮小します。また、画面幅640px以下では全体の内側余白を24px 18pxへ変更し、スマートフォンでもテキストフィールドとクリアボタンを使いやすい大きさで表示できるように調整しています。
コメント