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

1628
Thomas 2011-04-28 03:39.

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

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

ただし、「オプションを選択」はライトグレーではなく黒で表示されます。したがって、私のソリューションはおそらくCSSベースである可能性があります。jQueryも問題ありません。

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

option:first {
    color: #999;
}

問題は、人々はどのようにして選択ボックスにプレースホルダーを作成するのかということです。しかし、それはすでに答えられています、乾杯。

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

select {
    color: #999;
}

30 answers

3117
David 2011-05-03 05:45.

非CSS-JavaScript / jQueryの答えはありません:

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

858
William Isted 2011-12-09 22:22.

私はちょうどこの質問に出くわしました、そしてこれが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月):

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

  • GoogleChrome-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することもできます。

ほとんどのブラウザはこの疑似クラスをサポートしています。Internet Explorer10以降。これは、カスタムスタイルのselect要素で最適に機能します。いくつかのケース、すなわち(クローム/ SafariでMacの場合)には、あなたはのデフォルトの外観に変更する必要がありますselectつまり、特定のスタイルを表示するようにボックスを、background-colorcolor。互換性に関するいくつかの例と詳細については、developer.mozilla.orgをご覧ください。

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

Chromeで変更されたボーダー要素Macを使用する:

267
MattW 2015-04-23 08:30.

必須フィールドについては、最新のブラウザーに純粋な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>

105
Albireo 2011-04-28 03:50.

このようなもの:

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/

48
Ajithkumar S 2016-07-01 00:42.

option以下のように非表示の属性を追加しました。それは私にとってはうまくいっています。

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

35
Dani-Br 2014-02-12 22:24.

以下の解決策は、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>

26
rramiii 2014-08-11 19:00.

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

ここにあります:

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のおかげで、Internet Explorerブラウザーの回避策としてplace_holder、最初のオプションが再度選択された場合にクラスを再度追加できます:)

24
Jacob Schneider 2018-02-24 21:54.

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>

明らかに、関数と少なくとも選択したCSSを別々のファイルに分けることができます。

注: onload関数は、更新のバグを修正します。

20
Roman Yakoviv 2018-10-05 22:03.

ユーザーは、選択したオプションにプレースホルダーが表示されないようにする必要があります。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>

18
Nawaraj 2018-05-07 04:40.

ここで私はDavidの答え(受け入れられた答え)を修正しました。彼の答えでは、彼はoptionタグに無効で選択された属性を配置しましたが、非表示のタグも配置すると、はるかに見栄えが良くなります。

optionタグに非表示の属性を追加することで、「Durr」オプションが選択された後に「Selectyouroption」オプションが再選択されるのを防ぎます。

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

16
Will Wang 2016-11-15 20:00.

これが私のものです:

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>

12
user3520445 2014-04-11 06:50.

正解の兆候が見られますが、すべてをまとめるには、これが私の解決策になります。

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>

9
arun kumar 2018-08-29 23:06.

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

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

5
Aakash 2019-02-25 20:45.

この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>

幸運を...

5
Jean-philippe Emond 2014-07-22 07:14.

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

5
Matthew Millar 2020-05-23 15:49.

MattWの回答に基づいて、有効な選択が行われた後、プレースホルダーが選択されたままの場合にのみ条件付きで非表示にすることで、ドロップダウンメニューにプレースホルダーの選択オプションを表示できます(したがって、選択は無効です)。

select:required:invalid {
  color: gray;
}
select:invalid > 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>

4
wlh 2019-01-17 08:34.

私は受け入れられたソリューションが大好きで、 JavaScriptがなくてもうまく機能します。

制御された選択のReactコンポーネントにこの回答をどのように採用したかを追加したいのですが、それを理解するのに数回の試行が必要だったからです。組み込むのは本当に簡単react-selectですが、このリポジトリが提供する驚くべき機能が必要でない限り、問題のプロジェクトでは必要ありませんが、バンドルにキロバイトを追加する必要はありません。ノート、react-select種々の複雑なシステムを通して選択のプレースホルダを処理inputsし、html要素。

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

たとえば、

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

それは不適切であり、実際selectedにはオプションの1つに属性を追加するためにエラーをスローするので、それではどうしますか?

考えれば答えは簡単です。私たちは最初optionにandとselected同様になりたいので、次の3つのことを行う必要があります。disabledhidden

  1. 最初に定義されたにhiddenanddisabled属性を追加しますoption
  2. 最初の値をoption空の文字列に設定します。
  3. の値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; }
3
Grant Miller 2018-05-30 06:19.

[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>

3
fbparis 2017-06-07 21:56.

選択されるまでSELECTを灰色にしたかったので、この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や他のブラウザでも期待どおりに動作しますが、確認していません。

3
flyer 2017-06-09 12:12.

これが美しく機能するCSSソリューションです。コンテンツは、含まれている要素の後に:after pseudo-classを介して)追加されます(そしてコンテナーに対して絶対的に配置されます)。

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

selectディレクティブに自分で.emptyクラスを追加しますが、通常、angularは.ng-emptyを追加/削除します(コードサンプルにAngularのバージョン1.2を挿入しているためだと思います)。

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

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>

3
Eric G 2017-06-14 11:34.

現在、これらのいずれも機能させることができませんでした。これは、(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>

3
akinuri 2018-06-14 04:58.

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

これは私が過去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。

3
Jesto .K.J 2020-07-02 21:55.

この答えを参照してください:

<select>
        <option style="display: none;" value="" selected>SelectType</option>
        <option value="1">Type 1</option>
        <option value="2">Type 2</option>
        <option value="3">Type 3</option>
        <option value="4">Type 4</option>
</select>
2
Jurik 2020-01-23 00:02.

フォームの検証が必要であり、最新のブラウザはこれをゼロから提供します。

したがって、ユーザーがフィールドを選択できないように注意する必要はありません。彼がそれをしているとき、ブラウザの検証はこれが間違った選択であると彼に告げるからです。

ブラウザに組み込まれている検証関数checkValidity()。

ブートストラップにも良い例があります。

HTML

<form class="needs-validation">
  <select required>
    <option value="">Please select an option</option>
    <option value="1">Foo</option>
    <option value="2">Bar</option>
  </select>
<form>

Javascript

form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
  //form validation succeeded
} else {
  //form validation failed
}
2
GalaxyCat105 2020-11-05 08:29.

あなたはに最初のオプションの色を設定することができgray、それにの表示を設定noneし、selectへの色gray、および追加input設定し、それの色にすることをそれにイベントリスナーをblack

select > option:not(:first-of-type) {
  color: black;
}
<select style='color:gray' oninput='style.color="black"'>
  <option style='display:none'>
    Choose an option
  </option>
  <option>
    1
  </option>
  <option>
    2
  </option>
  <option>
    3
  </option>
</select>

使用customElementAPIを:

class placeholderSelect extends HTMLElement {
  connectedCallback() {
    this.outerHTML = `<select style='color:gray' oninput='style.color="black"'>
  <option style='display:none'>
    ${this.getAttribute('data-placeholder')} </option> ${this.innerHTML}
</select>`

    Array.from(this.children).forEach(function(el, i) {
      if (i !== 0) {
        el.style.color = 'black'
      }
    })
  }
}

customElements.define('placeholder-select', placeholderSelect)
<placeholder-select data-placeholder='Choose an option'>
  <option>
    1
  </option>
  <option>
    2
  </option>
  <option>
    3
  </option>
</placeholder-select>

1
Thusitha Wickramasinghe 2016-12-16 05:03.

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>
1
Mukundhan 2019-01-27 02:10.

では角度我々は、プレースホルダとしてオプションを追加することができます非表示にすることができるオプションのドロップダウンに。ブラウザのドロップダウンアイコンの代わりに、背景としてカスタムドロップダウンアイコンを追加することもできます。

トリックするプレースホルダイネーブルのみ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;
    }
  }
}
1
edu 2019-04-19 02:54.

Angular2のソリューション

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

<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

1
Chloe 2017-09-25 18:42.

これが私の貢献です。Haml + CoffeeScript + SCSS

Haml

=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)を追加して、プレースホルダーを開いたときに灰色のままにすることができますが、私はそれを気にしませんでした。

1
Jordan Lipana 2018-02-15 21:41.

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

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

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

Total War:Warhammer:Kotakuレビュー

Total War:Warhammer:Kotakuレビュー

私はこのゲームを嫌う準備ができていました。先週の前に、Total War:Warhammerについての私の考えがありました:それでもここに私は、私の手にある完成品であり、私は変わった男です。

涙の道:軍事化された帝国主義勢力がスタンディングロックキャンプを占領

涙の道:軍事化された帝国主義勢力がスタンディングロックキャンプを占領

スタンディングロックスー族のメンバーと水の保護者は、ノースダコタ州のスタンディングロックにあるオセティサコウィンキャンプを去ります。(Twitter経由のCNNスクリーンショット)火と煙がスカイラインを覆い、スタンディングロックスー族のメンバーと水の保護者が、聖なるものを守りながら建てた家、オセティサコウィン(セブンカウンシルファイアーズ)キャンプから行進し、太鼓を打ち、歌い、祈りました。ダコタアクセスパイプラインとしても知られる「ブラックスネーク」からの土地。

シアーズとKマートはイヴァンカ・トランプの商品を自分たちで取り除いています

シアーズとKマートはイヴァンカ・トランプの商品を自分たちで取り除いています

写真:APシアーズとKマートは、イヴァンカ・トランプのトランプホームアイテムのコレクションも、誰も購入したくないために削除しました。シアーズとKマートの両方の親会社であるシアーズホールディングスは、土曜日のABCニュースへの声明で、彼らが気にかけていると辛抱強く説明しましたトランプラインを売り続けるにはお金を稼ぐことについてあまりにも多く。

ポテトチップスでたった10分でスペインのトルティーヤを作る

ポテトチップスでたった10分でスペインのトルティーヤを作る

伝統的なスペインのトルティーヤは通常、オリーブオイルで柔らかくなるまで調理されたポテトから始まります(30分以上かかる場合があります)が、ケトルで調理されたポテトチップスの助けを借りてわずか10分でテーブルに置くことができます。上のビデオはすべてがバラバラにならないように裏返す方法を含め、レシピ全体を説明しますが、必要なのは4〜5個の卵と3カップのケトルチップスだけです。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language