「選択」ボックスのプレースホルダーを作成するにはどうすればよいですか?

https://stackoverflow.com/questions/5805059

24-10-2019
|

質問

テキスト入力にプレースホルダーを使用していますが、問題なく機能しています。ただし、セレクトボックスにもプレースホルダーを使用したいと考えています。もちろん、このコードをそのまま使用することもできます。

<select>
    <option value="">Select your option</option>
    <option value="hurr">Durr</option>
</select>

ただし、「オプションを選択してください」はライトグレーではなく黒です。したがって、私のソリューションは CSS ベースである可能性があります。jQueryでも大丈夫です。

これにより、ドロップダウンのオプションが灰色になるだけです (矢印をクリックした後)。

option:first {
    color: #999;
}

質問は：選択ボックスにプレースホルダーを作成するにはどうすればよいでしょうか?しかし、それはすでに答えられています、乾杯。

これを使用すると、選択された値は常に灰色になります (実際のオプションを選択した後でも)。

select {
    color: #999;
}

解決

非CSS -JavaScript/jQueryの回答なし：

<select>
    <option value="" disabled selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>

他のヒント

私はちょうどこの質問に出くわしました、そして、これがFirefoxとChromeで機能するものを（少なくとも）紹介します：

<style>
select:invalid { color: gray; }
</style>
<form>
<select required>
    <option value="" disabled selected hidden>Please Choose...</option>
    <option value="0">Open when powered (most valves do this)</option>
    <option value="1">Closed when powered, auto-opens when power is cut</option>
</select>
</form>

無効オプションは停止します <option> マウスとキーボードの両方で選択されているのに対し、使用するだけです 'display:none' ユーザーはキーボード矢印を介して選択することができます。 'display:none' スタイルは、リストボックスを「素敵」に見せるだけです。

注：空の使用 value 「プレースホルダー」オプションの属性により、検証（必要な属性）が「プレースホルダー」を持っていることを回避できるため、オプションが変更されていないが必要な場合、ブラウザはユーザーにリストからオプションを選択するように求めます。

更新（2015年7月）：

この方法は、次のブラウザで動作していることが確認されています。

Google Chrome -V.43.0.2357.132
Mozilla Firefox -V.39.0
Safari -v.8.0.7（プレースホルダーはドロップダウンで見えるが、選択できない）
Microsoft Internet Explorer -V.11（プレースホルダーはドロップダウンで表示されますが、選択できません）
Project Spartan -V.15.10130（プレースホルダーはドロップダウンで表示されますが、選択できません）

更新（2015年10月）：

削除しました style="display: none" HTML5属性を支持します hidden 幅広いサポートがあります。 hidden 要素には同様の特性があります display: none Safari、Internet Explorer、（Project Spartanがチェックする必要があります） option ドロップダウンで表示されますが、選択できません。

更新（2016年1月）：

いつ select 要素はです required の使用を許可します :invalid スタイルをスタイルできるCSS擬似クラス select 「プレースホルダー」状態にあるときの要素。 :invalid プレースホルダーの空の値のためにここで機能します option.

値が設定されると、 :invalid 擬似クラスがドロップされます。オプションで使用することもできます :valid あなたがそう願っているなら。

ほとんどのブラウザは、この擬似クラスをサポートしています。インターネットエクスプローラー10以降。これは、カスタムスタイルで最適に機能します select 要素;場合によっては、つまり（Chrome / SafariのMac）デフォルトの外観を変更する必要があります select 特定のスタイルが表示されるようにボックス、すなわち、 background-color と color. 。互換性についていくつかの例を見つけることができます developer.mozilla.org.

Chromeのネイティブ要素の外観Mac：

Select box native Mac in Chrome

Chromeで変更された境界要素MACを使用する：

Altered select box Mac in Chrome

必要なフィールドの場合、最新のブラウザには純粋なCSSソリューションがあります。

select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

<select required>
  <option value="" disabled selected>Select something...</option>
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

このようなもの：

HTML：

<select id="choice">
    <option value="0" selected="selected">Choose...</option>
    <option value="1">Something</option>
    <option value="2">Something else</option>
    <option value="3">Another choice</option>
</select>

CSS：

#choice option { color: black; }
.empty { color: gray; }

JavaScript：

$("#choice").change(function () {
    if($(this).val() == "0") $(this).addClass("empty");
    else $(this).removeClass("empty")
});

$("#choice").change();

作業例： http://jsfiddle.net/zmf6t/

Anに隠された属性を追加しました option 以下のように。それは私のためにうまく機能しています。

<select>
  <option hidden>Sex</option>
  <option>Male</option>
  <option>Female</option>
</select>

以下のソリューションは、JavaScriptなしでFirefoxでも機能します。

option[default] {
  display: none;
}

<select>
  <option value="" default selected>Select Your Age</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

私は同じ問題を抱えていたので、この質問に出くわしましたが、私にとって良い解決策を見つけた後、誰かがそれから利益を得ることができる場合に備えて皆さんと共有したいと思います。

ここにあります：

HTML：

<select class="place_holder dropdown">
    <option selected="selected" style=" display: none;">Sort by</option>
    <option>two</option>
    <option>something</option>
    <option>4</option>
    <option>5</option>
</select>

CSS：

.place_holder {
    color: gray;
}
option {
    color: #000000;
}

JavaScript：

jQuery(".dropdown").change(function () {
    jQuery(this).removeClass("place_holder");
});

顧客が最初のセレクトを作成した後、灰色の色は必要ありませんので、JavaScriptコードはクラスを削除します place_holder.

@user1096901のおかげで、インターネットエクスプローラーブラウザの回避策として、 place_holder 最初のオプションが再度選択された場合に再びクラス:)

JavaScriptまたはCSSは必要ありません。たった3つの属性：

<select>
    <option selected disabled hidden>Default Value</option>
    <option>Value 1</option>
    <option>Value 2</option>
    <option>Value 3</option>
    <option>Value 4</option>
</select>

オプションはまったく表示されません。オプションの値をデフォルトとして設定するだけです。

ただし、あなただけの場合 他の人と同じ色のプレースホルダーが好きではありません, 、次のようにインラインで修正できます。

<!DOCTYPE html>
<html>
    <head>
        <title>Placeholder for select tag drop-down menu</title>
    </head>

    <body onload="document.getElementById('mySelect').selectedIndex = 0">
        <select id="mySelect" onchange="document.getElementById('mySelect').style.color = 'black'"     style="color: gray;    width: 150px;">
          <option value="" hidden>Select your beverage</option> <!-- placeholder -->
          <option value="water" style="color:black" >Water</option>
          <option value="milk" style="color:black" >Milk</option>
          <option value="soda" style="color:black" >Soda</option>
        </select>
    </body>
</html>

明らかに、関数と少なくともSelectのCSSを個別のファイルに分離できます。

ノート： オンロード関数は更新バグを修正します。

ここで私は修正しましたデビッドの答え（受け入れられた答え）。彼の答えで、彼は無効化され、選択された属性を option タグですが、非表示のタグも付けられると、はるかに良く見えます。

に追加の隠された属性を追加します option タグは、「Durr」オプションが選択された後に「オプションを選択」オプションが再選択されるのを防ぎます。

<select>
    <option value="" disabled selected hidden>Select your option</option>
    <option value="hurr">Durr</option>
</select>

これが私のものです：

select:focus option.holder {
  display: none;
}

<select>
    <option selected="selected" class="holder">Please select</option>
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>

</select>

正解の兆候が見えますが、それをすべてまとめるために、これが私の解決策です。

select {
  color: grey;
}

option {
  color: black;
}

option[default] {
   display: none;
}

<select>
    <option value="" default selected>Select your option</option>
    <option value="hurr">Durr</option>
</select>

ユーザーは、選択オプションにプレースホルダーを表示しないでください。使用することをお勧めします hidden プレースホルダーオプションの属性、そしてあなたは selected このオプションの属性。あなたはそれを最初に置くことができます。

select:not(:valid) {
  color: #999;
}

<select required>
    <option value="" hidden>Select your option</option>
    <option value="0">First option</option>
    <option value="1">Second option</option>
</select>

Angularを使用している場合は、次のように移動します。

<select>
    <option [ngValue]="undefined"  disabled selected>Select your option</option>
    <option [ngValue]="hurr">Durr</option>
</select>

これ `HTML + CSS` 解決策は私のために働きました：

form select:invalid {
  color: gray;
}

form select option:first-child {
  color: gray;
}

form select:invalid option:not(:first-child) {
  color: black;
}

<form>
  <select required>
    <option value="">Select Planet...</option>
    <option value="earth">Earth</option>
    <option value="pandora">Pandora</option>
  </select>
</form>

幸運を...

JavaScriptの別の可能性：

 $('body').on('change', 'select', function (ev){
    if($(this).find('option:selected').val() == ""){
        $(this).css('color', '#999');
        $(this).children().css('color', 'black');
    }
    else {
        $(this).css('color', 'black');
        $(this).children().css('color', 'black');
    }
});

jsfiddle

入力 `[type="text"]` 選択要素のスタイルプレースホルダー

次のソリューションは、プレースホルダーが input[type="text"] エレメント：

$('.example').change(function () {
  $(this).css('color', $(this).val() === '' ? '#999' : '#555');
});

.example {
  color: #999;
}

.example > option {
  color: #555;
}

.example > option[value=""] {
  color: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="example">
  <option value="">Select Option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

がここにあります CSS 美しく機能するソリューション。含有要素の後にコンテンツが追加されます（およびコンテナに対して絶対に配置されます）via：擬似クラスの後).

ディレクティブを使用した場所を定義したプレースホルダー属性からテキストを取得します（attr（プレースホルダー））。もう1つの重要な要素はです ポインターイベント：なし - これにより、プレースホルダーテキストをクリックして選択を通過できます。それ以外の場合は、ユーザーがテキストをクリックしてもドロップダウンしません。

追加します 。空の 私の選択指令に自分自身をクラスしますが、通常は角度が追加/削除されることがわかります .ng-empty 私にとっては（コードサンプルにAngularのバージョン1.2を注入しているためだと思います）。

（サンプルは、独自のカスタム入力を作成してAngularJSでHTML要素をラップする方法も示しています）

var app = angular.module("soDemo", []);
app.controller("soDemoController", function($scope) {
  var vm = {};
  vm.names = [{
      id: 1,
      name: 'Jon'
    },
    {
      id: 2,
      name: 'Joe'
    }, {
      id: 3,
      name: 'Bob'
    }, {
      id: 4,
      name: 'Jane'
    }
  ];
  vm.nameId;
  $scope.vm = vm;
});

app.directive('soSelect', function soSelect() {
  var directive = {
    restrict: 'E',
    require: 'ngModel',
    scope: {
      'valueProperty': '@',
      'displayProperty': '@',
      'modelProperty': '=',
      'source': '=',
    },
    link: link,
    template: getTemplate
  };
  return directive;


  /////////////////////////////////
  function link(scope, element, attrs, ngModelController) {
    init();
    return;


    ///////////// IMPLEMENTATION

    function init() {
      initDataBinding();
    }


    function initDataBinding() {
      ngModelController.$render = function() {
        if (scope.model === ngModelController.$viewValue) return;
        scope.model = ngModelController.$viewValue;
      }

      scope.$watch('model', function(newValue) {
        if (newValue === undefined) {
          element.addClass('empty');
          return;
        }
        element.removeClass('empty');
        ngModelController.$setViewValue(newValue);
      });
    }
  }


  function getTemplate(element, attrs) {
    var attributes = [
      'ng-model="model"',
      'ng-required="true"'
    ];

    if (angular.isDefined(attrs.placeholder)) {
      attributes.push('placeholder="{{placeholder}}"');
    }

    var ngOptions = '';

    if (angular.isDefined(attrs.valueProperty)) {
      ngOptions += 'item.' + attrs.valueProperty + ' as ';
    }

    ngOptions += 'item.' + attrs.displayProperty + ' for item in source';
    ngOptions += '"';
    attributes.push('ng-options="' + ngOptions + '"');

    var html = '<select ' + attributes.join(' ') + '></select>';

    return html;
  }
});

so-select {
  position: relative;
}

so-select select {
  font-family: 'Helvetica';
  display: inline-block;
  height: 24px;
  width: 200px;
  padding: 0 1px;
  font-size: 12px;
  color: #222;
  border: 1px solid #c7c7c7;
  border-radius: 4px;
}

so-select.empty:before {
  font-family: 'Helvetica';
  font-size: 12px;
  content: attr(placeholder);
  position: absolute;
  pointer-events: none;
  left: 6px;
  top: 3px;
  z-index: 0;
  color: #888;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="soDemo" ng-controller="soDemoController">
  <so-select value-property="id" display-property="name" source="vm.names" ng-model="vm.nameId" placeholder="(select name)"></so-select>
</div>

私にとっては（1）必須ではなく、（2）デフォルトの選択可能に戻るオプションが必要であるため、これらのいずれかを現在機能させることができませんでした。 jqueryを使用している場合は、これが重い手渡しオプションです。

var $selects = $('select');
$selects.change(function () {
  var option = $('option:default', this);
  if(option && option.is(':selected')) {
    $(this).css('color', '#999');
  }
  else {
    $(this).css('color', '#555');
  }
});

$selects.each(function() {
  $(this).change();
});

option {
    color: #555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="in-op">
    <option default selected>Select Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

私はHTML/CSSのみのソリューションに満足していないので、カスタムを作成することにしました select JavaScriptを使用します。

これは私が過去30分間に書いたものであるため、さらに改善することができます。

あなたがしなければならないのは、少数のデータ属性を持つ簡単なリストを作成することです。コードは、リストを選択可能なドロップダウンに自動的に変えます。また、隠されたものを追加します input 選択した値を保持するために、フォームで使用できます。

入力：

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

出力：

<div class="ul-select-container">
    <input type="hidden" name="role" class="hidden">
    <div class="selected placeholder">
        <span class="text">Role</span>
        <span class="icon">▼</span>
    </div>
    <ul class="select" data-placeholder="Role" data-name="role">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

プレースホルダーになるはずのアイテムのテキストは灰色になります。ユーザーが自分の選択を元に戻したい場合に備えて、プレースホルダーは選択可能です。また、CSSを使用して、すべての欠点を使用します select 克服することができます（たとえば、オプションのスタイリングが不可能です）。

// Helper function to create elements faster/easier
// https://github.com/akinuri/js-lib/blob/master/element.js
var elem = function(tagName, attributes, children, isHTML) {
  let parent;
  if (typeof tagName == "string") {
    parent = document.createElement(tagName);
  } else if (tagName instanceof HTMLElement) {
    parent = tagName;
  }
  if (attributes) {
    for (let attribute in attributes) {
      parent.setAttribute(attribute, attributes[attribute]);
    }
  }
  var isHTML = isHTML || null;
  if (children || children == 0) {
    elem.append(parent, children, isHTML);
  }
  return parent;
};
elem.append = function(parent, children, isHTML) {
  if (parent instanceof HTMLTextAreaElement || parent instanceof HTMLInputElement) {
    if (children instanceof Text || typeof children == "string" || typeof children == "number") {
      parent.value = children;
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  } else {
    if (children instanceof HTMLElement || children instanceof Text) {
      parent.appendChild(children);
    } else if (typeof children == "string" || typeof children == "number") {
      if (isHTML) {
        parent.innerHTML += children;
      } else {
        parent.appendChild(document.createTextNode(children));
      }
    } else if (children instanceof Array) {
      children.forEach(function(child) {
        elem.append(parent, child);
      });
    } else if (typeof children == "function") {
      elem.append(parent, children());
    }
  }
};


// Initialize all selects on the page
$("ul.select").each(function() {
  var parent    = this.parentElement;
  var refElem   = this.nextElementSibling;
  var container = elem("div", {"class": "ul-select-container"});
  var hidden    = elem("input", {"type": "hidden", "name": this.dataset.name, "class": "hidden"});
  var selected  = elem("div", {"class": "selected placeholder"}, [
    elem("span", {"class": "text"}, this.dataset.placeholder),
    elem("span", {"class": "icon"}, "&#9660;", true),
  ]);
  var placeholder = elem("li", {"class": "placeholder"}, this.dataset.placeholder);
  this.insertBefore(placeholder, this.children[0]);
  container.appendChild(hidden);
  container.appendChild(selected);
  container.appendChild(this);
  parent.insertBefore(container, refElem);
});

// Update necessary elements with the selected option
$(".ul-select-container ul li").on("click", function() {
  var text     = this.innerText;
  var value    = this.dataset.value || "";
  var selected = this.parentElement.previousElementSibling;
  var hidden   = selected.previousElementSibling;
  hidden.value = selected.dataset.value = value;
  selected.children[0].innerText = text;
  if (this.classList.contains("placeholder")) {
    selected.classList.add("placeholder");
  } else {
    selected.classList.remove("placeholder");
  }
  selected.parentElement.classList.remove("visible");
});

// Open select dropdown
$(".ul-select-container .selected").on("click", function() {
  if (this.parentElement.classList.contains("visible")) {
    this.parentElement.classList.remove("visible");
  } else {
    this.parentElement.classList.add("visible");
  }
});

// Close select when focus is lost
$(document).on("click", function(e) {
  var container = $(e.target).closest(".ul-select-container");
  if (container.length == 0) {
    $(".ul-select-container.visible").removeClass("visible");
  }
});

.ul-select-container {
  width: 200px;
  display: table;
  position: relative;
  margin: 1em 0;
}
.ul-select-container.visible ul {
  display: block;
  padding: 0;
  list-style: none;
  margin: 0;
}
.ul-select-container ul {
  background-color: white;
  border: 1px solid hsla(0, 0%, 60%);
  border-top: none;
  -webkit-user-select: none;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 999;
}
.ul-select-container ul li {
  padding: 2px 5px;
}
.ul-select-container ul li.placeholder {
  opacity: 0.5;
}
.ul-select-container ul li:hover {
  background-color: dodgerblue;
  color: white;
}
.ul-select-container ul li.placeholder:hover {
  background-color: rgba(0, 0, 0, .1);
  color: initial;
}
.ul-select-container .selected {
  background-color: white;
  padding: 3px 10px 4px;
  padding: 2px 5px;
  border: 1px solid hsla(0, 0%, 60%);
  -webkit-user-select: none;
}
.ul-select-container .selected {
  display: flex;
  justify-content: space-between;
}
.ul-select-container .selected.placeholder .text {
  color: rgba(0, 0, 0, .5);
}
.ul-select-container .selected .icon {
  font-size: .7em;
  display: flex;
  align-items: center;
  opacity: 0.8;
}
.ul-select-container:hover .selected {
  border: 1px solid hsla(0, 0%, 30%);
}
.ul-select-container:hover .selected .icon {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

<ul class="select" data-placeholder="Sex" data-name="sex">
  <li data-value="male">Male</li>
  <li data-value="female">Female</li>
</ul>

アップデート: ：私はこれを改善しました（選択はキーを上/下/入力/入力）、出力を少し整理し、これをオブジェクトに変えました。現在の出力：

<div class="li-select-container">
    <input type="text" readonly="" placeholder="Role" title="Role">
    <span class="arrow">▼</span>
    <ul class="select">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

初期化：

new Liselect(document.getElementsByTagName("ul")[0]);

さらなる調査のために： jsfiddle, ~~github~~ （改名）。

アップデート： 私はこれをもう一度書き直しました。リストを使用する代わりに、SELECTを使用できます。これにより、JavaScriptがなくても機能します（無効になっている場合）。

入力：

<select name="role" data-placeholder="Role" required title="Role">
    <option value="admin">Administrator</option>
    <option value="mod">Moderator</option>
    <option>User</option>
</select>

new Advancelect(document.getElementsByTagName("select")[0]);

出力：

<div class="advanced-select">
    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">
    <span class="arrow">▼</span>
    <ul>
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li>User</li>
    </ul>
</div>

jsfiddle, github.

を使用しなくてもこれを行うことができます Javascript のみを使用して 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>

の角度プレースホルダーとしてオプションを追加できます 隠すことができます オプションドロップダウン。追加することもできます カスタムドロップダウンアイコン 背景として ブラウザのドロップダウンを交換します アイコン。

騙すそうです プレースホルダーを有効にします CSSはいつでも 値は選択されていません

/**私のコンポーネントテンプレート*/

 <div class="dropdown">
      <select [ngClass]="{'placeholder': !myForm.value.myField}"
 class="form-control" formControlName="myField">
        <option value="" hidden >Select a Gender</option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
    </div>

/**私のcomponent.ts*/

constructor(fb: FormBuilder) {
  this.myForm = this.fb.build({
    myField: ''
  });
}

/** global.scss*/

.dropdown {
  width: 100%;
  height: 30px;
  overflow: hidden;
  background: no-repeat white;
  background-image:url('angle-arrow-down.svg');
  background-position: center right;
  select {
    background: transparent;
    padding: 3px;
    font-size: 1.2em;
    height: 30px;
    width: 100%;
    overflow: hidden;

    /*For moz*/
    -moz-appearance: none;
    /* IE10 */
    &::-ms-expand {
      display: none;
    }
    /*For chrome*/
    -webkit-appearance:none;
    &.placeholder {
      opacity: 0.7;
      color: theme-color('mutedColor');
    }
    option {
      color: black;
    }
  }
}

角度2のソリューション

選択の上にラベルを作成します

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

CSSを適用して上に配置します

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none ラベルをクリックすると選択を表示できます。これは、オプションを選択すると非表示になります。

角度 HTML CSS

このHTMLのこの部分については、選択が選択されるまで灰色になることを望んでいました。

<select>
  <option value="" disabled selected>Select your option</option>
  <option value="hurr">Durr</option>
</select>

これらのCSS定義を追加しました：

select { color: grey; }
select:valid { color: black; }

Chrome / Safariや他のブラウザでも期待どおりに機能しますが、チェックしていません。

変更のためにこれを試してください：

$("select").css("color", "#757575");
$(document).on("change", "select", function(){
    if ($(this).val() != "") {
        $(this).css("color", "");
    } 
    else {
        $(this).css("color", "#757575");
    }
});

私は愛してる受け入れられたソリューション, 、そしてJavaScriptなしでうまく機能します。

この答えをどのように採用したかを追加したいだけです 制御された選択反応成分, 、それが私にそれを理解するためにいくつかの試みが必要だからです。組み込むのは本当に簡単です react-select そしてそれで終わりますが、このリポジトリが提供する驚くべき機能が必要な場合を除き、問題のプロジェクトのためではありませんが、バンドルにこれ以上キロバイトを追加する必要はありません。ノート、 react-select さまざまな複雑なシステムを介して選択するプレースホルダーをハンドル inputs と html 要素。

反応、aの制御されたコンポーネント, 、追加することはできません selected オプションへの属性。 Reactは、aを介して選択の状態を処理します value 上に属性 select それ自体と、変更ハンドラーとともに、値はオプション内の値属性の1つと一致する必要があります。

たとえば、など

<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    {options}
</select>

不適切で、実際にはエラーが発生して追加するため selected オプションの1つへの属性、何ですか？

あなたがそれについて考えると、答えは簡単です。私たちは最初に欲しいので option することが selected としても disabled と hidden, 、3つのことをする必要があります。

追加します hidden と disabled 最初に定義されたものへの属性 option.
最初の値を設定します option 空の文字列になること。
の値を初期化します select また、空の文字列になります。

state = { selectValue = "" } // State or props or their equivalent

// In the render function
<select value={this.state.selectValue} onChange={this.handleChange} required={true}>
    <option key="someKey" value="" disabled="disabled" hidden="hidden">Select from Below</option>
    {renderOptions()}
</select>

これで、上記のように（または className 必要に応じて）。

select:invalid { color: gray; }

これが私の貢献です。 haml + coffeescript + SCSS

ハムル

=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'

coffeescript

  $('select').on 'change', ->
    if $(this).val()
      $(this).css('color', 'black')
    else
      $(this).css('color', 'gray')
  $('select').change()

SCSS

select option {
  color: black;
}

サーバーコードを変更し、プロパティの現在の値に応じてクラススタイルのみを設定することでCSSのみを使用することができますが、この方法はより簡単でクリーンなようです。

$('select').on('change', function() {
  if ($(this).val()) {
    return $(this).css('color', 'black');
  } else {
    return $(this).css('color', 'gray');
  }
});

$('select').change();

    select option {
      color: black;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="user[country_id]" id="user_country_id">
  <option value="">Country</option>
                      <option value="231">United States</option>
                      <option value="1">Andorra</option>
                      <option value="2">Afghanistan</option>
                      <option value="248">Zimbabwe</option></select>

CSSを追加できます（select option:first-child）プレースホルダーが開いたときにグレーを保つために、私はそれを気にしませんでした。

ここは作業例最初のクリック後にオプションの色を処理する純粋なJavaScriptでこれを達成する方法：

<!DOCTYPE html>
<html>
  <head>
    <style>
      #myselect {
        color: gray;
      }
    </style>
  </head>

  <body>
    <select id="myselect">
      <option disabled selected>Choose Item
      </option>

      <option>Item 1
      </option>

      <option>Item 2
      </option>

      <option>Item 3
      </option>
    </select>

    <script>
      // Add event listener to change color in the first click
      document.getElementById("myselect").addEventListener("click", setColor)
      function setColor()
      {
        var combo = document.getElementById("myselect");
        combo.style.color = 'red';
        // Remove Event Listener after the color is changed at the first click
        combo.removeEventListener("click", setColor);
      }
    </script>
  </body>
</html>

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow

「選択」ボックスのプレースホルダーを作成するにはどうすればよいですか?

HTML：

CSS：

JavaScript：

これ HTML + CSS 解決策は私のために働きました：

入力 [type="text"] 選択要素のスタイルプレースホルダー

角度2のソリューション

ハムル

coffeescript

SCSS

これ `HTML + CSS` 解決策は私のために働きました：

入力 `[type="text"]` 選択要素のスタイルプレースホルダー