web-dev-qa-db-ja.com

選択タグのプレースホルダー

選択タグにプレースホルダーを持つことは可能ですか？

<select placeholder="select your beverage">

   <option>Tea</option>

   <option>coffee</option>

   <option>soda</option>

</select>

または回避策の可能性がありますか？

html5css3
62
Dalton Pereira

編集：これは私が書いた時点で機能しましたが、Blexenが指摘したように、仕様にはありません。

次のようなオプションを追加します。

<option default>Select Your Beverage</option>

正しい方法：

<option selected="selected">Select Your Beverage</option>
37
General_Twyckenham

Mozilla Dev Network によると、placeholderは<select>入力の有効な属性ではありません。

代わりに、以下に示すように、空のvalueおよびselected属性を持つオプションを追加します。空のvalue属性は、<option>の値を<option>の値として使用するデフォルトの動作を防ぐために必須です。

<select>
    <option value="" selected>select your beverage</option>
    <option value="tea">Tea</option>
    <option value="coffee">Coffee</option>
    <option value="soda">Soda</option>
</select>

最新のブラウザでは、required属性を<select>要素に追加しても、選択したオプションに空の値がある場合、ユーザーは要素が含まれるフォームを送信できません。

リスト内のデフォルトオプション（要素をクリックすると表示される）のスタイルを設定する場合、サポートされているCSSプロパティの数は限られています。 colorとbackground-colorは2つの最も安全な賭けであり、他のCSSプロパティは無視される可能性があります。

私のオプションでは（HTML5で）デフォルトオプションをマークする最良の方法は、カスタムdata-*属性を使用することです。1 デフォルトオプションをグレー表示するようにスタイルを設定する方法は次のとおりです。

select option[data-default] {
  color: #888;
}
<select>
  <option value="" selected data-default>select your beverage</option>
  <option value="tea">Tea</option>
  <option value="coffee">Coffee</option>
  <option value="soda">Soda</option>
</select>

ただし、これにより、ドロップダウンリスト内の項目のスタイルのみが設定され、入力に表示される値のスタイルは設定されません。 CSSでスタイルを設定する場合は、<select>要素を直接ターゲットにします。その場合、現在選択されている要素のスタイルのみをいつでも変更できます。2

ユーザーがデフォルトのアイテムを選択するのを少し難しくしたい場合は、display: none;に<option> CSSルールを設定できますが、これはwill =ユーザーがそれを選択できないようにします（たとえば、矢印キー/タイピングを使用）。これにより、ユーザーが選択するのが難しくなります。

1 この回答は、以前は非標準であり、それ自体には意味がないdefault属性の使用を推奨していました。
2 JavaScriptを使用して、選択した値に基づいて選択自体をスタイルすることは技術的に可能ですが、それはこの質問の範囲外です。 この回答 ただし、この方法をカバーしています。

66
SeinopSys
<select>

    <option selected="selected" class="Country">Country Name</option>

    <option value="1">India</option>

    <option value="2">us</option>

</select>

.country
{


    display:none;
}

</style>
12
manish mohanan

はい、可能です

HTMLのみを使用してこれを行うことができます。デフォルトの選択オプションdisabled=""およびselected=""を設定し、タグrequired=""を選択する必要があります。ブラウザでは、オプションを選択せず​​にフォームを送信することはできません。

<form action="" method="POST">
    <select name="in-op" required="">
        <option disabled="" selected="">Select Option</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <input type="submit" value="Submit">
</form>
3
Thusitha Wickramasinghe

これは、選択ボックスのプレースホルダー用の関数です。

HTML

<select name="country" id="country">
  <option value="" disabled selected>Country</option>
  <option value="c1">England</option>
  <option value="c2">Russia</option>
  <option value="c3">USA</option>
</select>

jQuery

     jQuery(function($) {
      /*function for placeholder select*/
      function selectPlaceholder(selectID){
        var selected = $(selectID + ' option:selected');
        var val = selected.val();
        $(selectID + ' option' ).css('color', '#333');
        selected.css('color', '#999');
        if (val == "") {
          $(selectID).css('color', '#999');
        };
        $(selectID).change(function(){
          var val = $(selectID + ' option:selected' ).val();
          if (val == "") {
            $(selectID).css('color', '#999');
          }else{
            $(selectID).css('color', '#333');
          };
        });
      };

      selectPlaceholder('#country');

    });
2
Andrey Kartavtsev

Select2プラグインがあり、プレースホルダーとともに多くのクールなものを設定できます。これは、選択ボックスのjQueryの代替品です。こちらが公式サイトです https://select2.github.io/examples.html

問題は、空想検索オプションを無効にする場合は、次のオプションセットを使用してください。

data-plugin-options='
{ 
    "placeholder": "Select status",
    "allowClear": true, 
    "minimumResultsForSearch": -1
}

特に、allowClearオプションが気に入っています。

ありがとうございました。

1
Yevgeniy Afanasyev

あなたのHTML CSSでそれを行うことができるJAVScriptやメソッドを取る必要はありません

HTML

<select id="myAwesomeSelect">
    <option selected="selected" class="s">Country Name</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>

Css

.s
{
    color:white;
        font-size:0px;
    display:none;
}
0
Amitpal Singh