<input type="search">のキャンセルボタン（Ｘマーク）
をカスタマイズする - キャンセルボタンの変更、表示位置の変更など -

<input>要素のtype="search"型は、ユーザーが検索クエリを入力するために設計された１行のテキスト入力欄です（HTML5でサポート）。 type="text"型の入力欄と機能的には同じです。 一見通常のテキストフィールドと同じですが、テキストを入力するとフィールドの右側に青系色の「×」マーク（search-cancel-button）が表示されます。
（type="search"テキストフィールド　例）

このXマーク（キャンセルボタン）をクリックで入力内容を即削除することができます。

キャンセルボタン（Ｘマーク）のカスタマイズ内容はつぎのとおりです。 type="search"の検索フィールドについて、デフォルト（標準）を含め、７パターンの事例のデモをつぎに示します。

◆ type="search" キャンセルボタン（Ｘマーク）のカスタマイズ デモ

検索フィールド１： ・・・標準
検索フィールド２： ・・・標準＋キャンセルボタンポインター付き
検索フィールド３： ・・・標準＋キャンセルボタンを左側に配置
検索フィールド４： ・・・キャンセルボタン変更+キャンセルボタンポインター付き
検索フィールド５： ・・・キャンセルボタン変更+ポインター付きキャンセルボタン左に配置
検索フィールド６： ・・・キャンセルボタン変更＋プルダウンメニュー＋キャンセルボタンポインター付き
検索フィールド７： ・・・キャンセルボタンなし
     
    ※実際に送信し確認リストを表示できます。

 キャンセルボタン（Ｘマーク）のカスタマイズ デモのHTML

カスタマイズ デモのHTMLのソースは、CSS、HTMLおよび全体毎にまとめて記載します。Javascriptは使用していません。 


/* inputフィールド共通設定 */
input {
   position: relative;
   border: 1px solid gray;
   border-radius: 0px;
   padding: 5px;;
   font-size: 100%;
   margin:2px;
   
}
/*  input type="search" 共通迂設定  */
input[type="search"]::-webkit-search-cancel-button {   
   height: 16px;   /* キャンセルボタンのサイズ */
   width: 16px;    /*  キャンセルボタンのサイズ */
}

/* 検索フィールド２：標準＋キャンセルボタンポインター付き */
#clearbutton2::-webkit-search-cancel-button { 
  cursor:pointer; /*  キャンセルボタンにポインターを付ける  */
}

/* 検索フィールド３：標準＋キャンセルボタンを左側に配置  */
#clearbutton3 {
   padding-left: 32px;
}
#clearbutton3::-webkit-search-cancel-button {
   position: absolute;
   left: 10px;
   cursor:pointer;
}

/* 検索フィールド４：キャンセルボタン変更+キャンセルボタンポインター付き */
#clearbutton4::-webkit-search-cancel-button {            /*  指定idのinput-searchのみ対象 */
  -webkit-appearance: none;    /* デフォルトのサーチキャンセルボタンを非表示にする場合 */
  cursor:pointer;
  background-image: url(./img/x-icon-twitter.-greenpng.png );  /* デフォルトのサーチキャンセルボタンを非表示にすること */
  background-repeat: no-repeat;
  background-size: cover;
  padding-right: 0px;
}

/* 検索フィールド５：キャンセルボタン変更+ポインター付きキャンセルボタン左に配置 */
#clearbutton5 {
   padding-left: 28px;
}
#clearbutton5::-webkit-search-cancel-button {            /*  指定idのinput-searchのみ対象 */
  -webkit-appearance: none;    /* デフォルトのサーチキャンセルボタンを非表示にする場合 */
  cursor:pointer;
  background-image: url(./img/x-icon-gray-white.png );  /* デフォルトのサーチキャンセルボタンを非表示にすること */
  position: absolute;
  left: 6px;
  top: 5px;
  background-repeat: no-repeat;
  background-size: cover;
  
}

/* 検索フィールド６：キャンセルボタン変更＋プルダウンメニュー＋キャンセルボタンポインター付き  */
#clearbutton6::-webkit-search-cancel-button {    
  -webkit-appearance: none;    /* デフォルトのサーチキャンセルボタンを非表示にする場合 */
  cursor:pointer;
  background-image: url(./img/x-icon-gray-3.png);  /* デフォルトのサーチキャンセルボタンを非表示にすること */
  background-repeat: no-repeat;
  background-size: cover;
  padding-right: 0px;
  width:10px; height:10px;  /* キャンセルボタンのサイズを個別に設定する場合 */
}

/* 検索フィールド７：キャンセルボタンなし  */
#clearbutton7::-webkit-search-cancel-button {    
  -webkit-appearance: none;    /* デフォルトのサーチキャンセルボタンを非表示にする場合 */
}


<form action="input-search-form-disp.php" method="post" target="_blank">
   <span>検索フィールド１：</span><input type="search" id="clearbutton1" name="item1"> ・・・標準<br> <!-- size="20"がデフォルト-->
   <span>検索フィールド２：</span><input type="search" id="clearbutton2" name="item2" size="25"> ・・・標準＋キャンセルボタンポインター付き<br>
   <span>検索フィールド３：</span><input type="search" id="clearbutton3" name="item3" size="30"> ・・・標準＋キャンセルボタンを左側に配置<br>
   <span>検索フィールド４：</span><input type="search" id="clearbutton4" name="item4" size="25"> ・・・キャンセルボタン変更+キャンセルボタンポインター付き<br>
   <span>検索フィールド５：</span><input type="search" id="clearbutton5" name="item5" size="20"> ・・・キャンセルボタン変更+ポインター付きキャンセルボタン左に配置<br>
   <span>検索フィールド６：</span><input type="search" id="clearbutton6" size="14" name="item6" maxlength="15" list="sumai" placeholder="住まいの選択">
   <datalist id="sumai">
   <option value="茨城県"></option>
   <option value="栃木県"></option>
   <option value="群馬県"></option>
   <option value="埼玉県"></option>
   <option value="千葉県"></option>
   <option value="東京都"></option>
   <option value="神奈川県"></option>
   </datalist>・・・キャンセルボタン変更＋プルダウンメニュー＋キャンセルボタンポインター付き<br>
   <span>検索フィールド７：</span><input type="search" id="clearbutton7" name="item7" size="40"> ・・・キャンセルボタンなし<br>
       <input type="submit" value="送信"> <small>※実際に送信できます</small>
</form>


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- HTMLソースコード utf-8 必須 -->
<title><input type="search">のキャンセルボタン（Ｘアイコン）<br>をカスタマイズする - キャンセルボタンの変更、表示位置の変更など -</title>
<style>
/* inputフィールド共通設定 */
input {
   position: relative;
   border: 1px solid gray;
   border-radius: 0px;
   padding: 5px;;
   font-size: 100%;
   margin:2px;
   
}
/*  input type="search" 共通迂設定  */
input[type="search"]::-webkit-search-cancel-button {   
   height: 16px;   /* キャンセルボタンのサイズ */
   width: 16px;    /*  キャンセルボタンのサイズ */
}

/* 検索フィールド２：標準＋キャンセルボタンポインター付き */
#clearbutton2::-webkit-search-cancel-button { 
  cursor:pointer; /*  キャンセルボタンにポインターを付ける  */
}

/* 検索フィールド３：標準＋キャンセルボタンを左側に配置  */
#clearbutton3 {
   padding-left: 32px;
}
#clearbutton3::-webkit-search-cancel-button {
   position: absolute;
   left: 10px;
   cursor:pointer;
}

/* 検索フィールド４：キャンセルボタン変更+キャンセルボタンポインター付き */
#clearbutton4::-webkit-search-cancel-button {            /*  指定idのinput-searchのみ対象 */
  -webkit-appearance: none;    /* デフォルトのサーチキャンセルボタンを非表示にする場合 */
  cursor:pointer;
  background-image: url(./img/x-icon-twitter.-greenpng.png );  /* デフォルトのサーチキャンセルボタンを非表示にすること */
  background-repeat: no-repeat;
  background-size: cover;
  padding-right: 0px;
}

/* 検索フィールド５：キャンセルボタン変更+ポインター付きキャンセルボタン左に配置 */
#clearbutton5 {
   padding-left: 28px;
}
#clearbutton5::-webkit-search-cancel-button {            /*  指定idのinput-searchのみ対象 */
  -webkit-appearance: none;    /* デフォルトのサーチキャンセルボタンを非表示にする場合 */
  cursor:pointer;
  background-image: url(./img/x-icon-gray-white.png );  /* デフォルトのサーチキャンセルボタンを非表示にすること */
  position: absolute;
  left: 6px;
  top: 5px;
  background-repeat: no-repeat;
  background-size: cover;
  
}

/* 検索フィールド６：キャンセルボタン変更＋プルダウンメニュー＋キャンセルボタンポインター付き  */
#clearbutton6::-webkit-search-cancel-button {    
  -webkit-appearance: none;    /* デフォルトのサーチキャンセルボタンを非表示にする場合 */
  cursor:pointer;
  background-image: url(./img/x-icon-gray-3.png);  /* デフォルトのサーチキャンセルボタンを非表示にすること */
  background-repeat: no-repeat;
  background-size: cover;
  padding-right: 0px;
  width:10px; height:10px;  /* キャンセルボタンのサイズを個別に設定する場合 */
}

/* 検索フィールド７：キャンセルボタンなし  */
#clearbutton7::-webkit-search-cancel-button {    
  -webkit-appearance: none;    /* デフォルトのサーチキャンセルボタンを非表示にする場合 */
}
</style>
</head>
<body>
<h3>キャンセルボタン（Ｘマーク）のカスタマイズ デモ</h3>
<form action="input-search-form-disp.php" method="post" target="_blank">
   <span>検索フィールド１：</span><input type="search" id="clearbutton1" name="item1"> ・・・標準<br> <!-- size="20"がデフォルト-->
   <span>検索フィールド２：</span><input type="search" id="clearbutton2" name="item2" size="25"> ・・・標準＋キャンセルボタンポインター付き<br>
   <span>検索フィールド３：</span><input type="search" id="clearbutton3" name="item3" size="30"> ・・・標準＋キャンセルボタンを左側に配置<br>
   <span>検索フィールド４：</span><input type="search" id="clearbutton4" name="item4" size="25"> ・・・キャンセルボタン変更+キャンセルボタンポインター付き<br>
   <span>検索フィールド５：</span><input type="search" id="clearbutton5" name="item5" size="20"> ・・・キャンセルボタン変更+ポインター付きキャンセルボタン左に配置<br>
   <span>検索フィールド６：</span><input type="search" id="clearbutton6" size="14" name="item6" maxlength="15" list="sumai" placeholder="住まいの選択">
   <datalist id="sumai">
   <option value="茨城県"></option>
   <option value="栃木県"></option>
   <option value="群馬県"></option>
   <option value="埼玉県"></option>
   <option value="千葉県"></option>
   <option value="東京都"></option>
   <option value="神奈川県"></option>
   </datalist>・・・キャンセルボタン変更＋プルダウンメニュー＋キャンセルボタンポインター付き<br>
   <span>検索フィールド７：</span><input type="search" id="clearbutton7" name="item7" size="40"> ・・・キャンセルボタンなし<br>
       <input type="submit" value="送信">
</form>
</body>
</html>


TOP

 FORM関連サイト内リンク

  1. Clipmail & Captcha認証 お問い合わせフォーム≫
  2. HTML FORM SELECT OPTION要素の追加、削除およびOPTION要素のtext値の変更方法 （jQuery）≫
  3. メールフォームCLIP-MAILにCaptcha認証（アンチスパム画像認証）をカスタマイズする。（PHP + Ajax）≫
  4. できる！ブログなどのレス記事に、自作のいいねボタンを動的に設置する。KENTWEB ASKA BBS のレス記事に自作のいいねボタンといまいちボタンをカスタマイズできる。 ≫

 最終更新日：2020.10.15（Debut）