HTML <select> 「ご選択」を<option>選択させない

HTML/CSS ネタです。

<select>で、「ご選択」のテキストを最上部に表示した方が、親切だったり誘導だったりするので、配置していましたが、required※必須だと、未選択でスルーしても、「ご選択」を選択した事になってしまい※必須が無意味です・・・

フォームで、見本テキストのように案内テキストをグレーアウト(リプレイス)で表示するのは、placeholder=' ' が仕様です。

<input placeholder='ここにテキスト'>
<textarea placeholder='ここにテキスト'></textarea>

でも、<select>では無理です・・・ HTMLだけで設定すると、
 ← 「ご選択」自体すらOP項目になっちゃいます・・・
ところがこれ、CSSで実現できるんですね!
 ← 「ご選択」自体は、OP項目に出ません!
しかも、 value=''の値が0になるので、※必須が有効になるのです。

<option value='' disabled selected style='display:none;'>

これが実現できるなんて、この方法は思いつきませんでしたw

<select>
<option value='' disabled selected style='display:none;'>・ご選択</option>
<option>あああ</option>
<option>ABCDEFGHI</option>
<option>12345</option>
</select>

SELECTED属性も付与できますし、フォーム用.cssで、デフォ利用すると便利でしょう。
selectでdisabledなんて使わないから、
select option:first-child[disabled]{ display: none;}で良いでしょうね。

ただ、フォームの目的に関しては、
※必須や記入/選択の項目を多く設定/設置してしまうと、選択肢に該当しないユーザーを強制する事になるので、送信率が減ります・・・
なので、
<option value='未選択'>・ご選択</option> のように曖昧にしておりました。[その他]の項目でも親切でした。
この目的としては、フォームでの第一声「ファーストコンタクト」を頂く事が、利便性よりもマーケティングとして優先事項/重要だったりしますので、※必須や記入/選択の項目は、慎重に設置しましょう。




コメント

コメントを書く
お名前:

メール:

Web URL:

コメント: [必須入力]

認証コード: [入力必須] ※ 画像の文字を半角で入力してください。
認証 : 一二三

 ※ 承認されたコメントのみ表示されます。