「選択」ボックスのプレースホルダーを作成する方法
テキスト入力にプレースホルダーを使用していますが、問題ありません。しかし、私は私のセレクトボックスにもプレースホルダーを使いたいのです。もちろん、私はこのコードを使うことができます：
<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>Disabledオプションは、マウスとキーボードの両方で<option>が選択されているのを停止しますが、'display:none'を使用するだけで、ユーザーはキーボードの矢印で選択することができます。 'display:none'スタイルは、リストボックスを 'Nice'に見せるだけです。
注： "placeholder"オプションに空のvaluename__属性を使用すると、 "placeholder"を持つことを検証（必須属性）で回避することができます。ブラウザは、リストからオプションを選択するようにユーザーに促します。
更新（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月）：
広くサポートされているHTML5属性hiddenname__のためにstyle="display: none"を削除しました。 hiddenname__要素には、IEのSafariのdisplay: none（Project Spartanで確認が必要）と似た特徴があります。ここで、optionname__はドロップダウンに表示されますが、選択はできません。
更新（2016年1月）：
selectname__要素がrequiredname__の場合、selectname__要素を「プレースホルダー」状態のときにスタイル設定できる:invalid CSS疑似クラスを使用できます。プレースホルダーoptionname__に空の値があるため、:invalidはここで機能します。
値が設定されると、:invalid疑似クラスは削除されます。必要に応じて、オプションで:validを使用することもできます。
ほとんどのブラウザはこの疑似クラスをサポートしています。 IE10 +これはカスタムスタイルのselectname__要素で最もうまく機能します。場合によっては（Chrome/SafariのMac）、特定のスタイルが表示されるようにselectname__ボックスのデフォルトの外観を変更する必要があります（background-color、colorname__）。 developer.mozilla.org に互換性に関するいくつかの例と詳細があります。
Chromeでのネイティブエレメントの外観Mac：
Chromeで変更されたボーダー要素Macを使う：
必須分野のために、現代のブラウザに純粋な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();
下記のように隠し属性をオプションに追加しました。
<select>
<option hidden>Sex</option>
<option>Male</option>
<option>Female</option>
</select>その解決策はFireFoxでも機能します。
JSなし。
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;
}
JS：
jQuery(".dropdown").change(function () {
jQuery(this).removeClass("place_holder");
});
顧客が最初に灰色を必要としない選択をした後、JSはクラスplace_holderを削除します。これが誰かに役立つことを願っています:)
更新： @ user1096901のおかげで、IEブラウザの回避策として、最初のオプションが再び選択された場合にplace_holderクラスを再度追加できる
JSや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を別々のファイルに分けることができます。
注： onload関数はリフレッシュのバグを修正します。
私は正解の兆候を見ますが、それをすべてまとめることが私の解決策になります。
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>これが私のものです
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>ここで私はDavidの答えを修正しました（受け入れられた答え）。彼の答えでは、彼は無効にして選択した属性をオプションタグに付けましたが、隠しタグも入れた方がはるかに良く見えます。 "Durr"オプションが選択された後に再選択されることからのオプション。
<select>
<option value="" disabled selected hidden>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>あなたが角度を使用している場合はこのように行きます
<select>
<option [ngValue]="undefined" disabled selected>Select your option</option>
<option [ngValue]="hurr">Durr</option>
</select>JSのもう一つの可能性：
$('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');
}
});
これがCSSの解決策です。コンテンツは、含まれる要素の後に追加されます（コンテナに対して絶対に配置されます）（via：after pseudo-class）。ディレクティブを使用した場所で定義したプレースホルダー属性からテキストを取得します（attr（placeholder））。もう1つの重要な要素は、pointer-events：noneです。これにより、プレースホルダーテキストのクリックが選択に渡されます。そうしないと、ユーザーがテキストをクリックしてもドロップダウンしません。
Selectディレクティブに。emptyクラスを自分で追加しますが、通常はangularが追加/削除されます。ng-empty for（私はそれがb/cコードサンプルで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>
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>
これは 実用的な例です 最初のクリック後にオプションの色を処理する純粋な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>
Angularでは、オプションのドロップダウンに非表示というプレースホルダーとしてオプションを追加できます。 ブラウザのドロップダウンを置き換えるアイコンの背景としてカスタムドロップダウンアイコンを追加することもできます。
トリックはプレースホルダーを有効にする 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>
/ ** My 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;
}
}
}
このHTMLについては、選択するまでSELECTをグレーにしたいと思いました。
<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");
}
});
私はHTML/CSSのみのソリューションに満足していないので、私はJSを使ってカスタムのselectを作成することにしました。
これは私が過去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"}, "▼", 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を使うことができます。こうすれば、JSがなくても機能します（無効になっている場合）。
入力：
<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>
選択要素の入力[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>私は上記の一般的な解決策が大好きで、JavaScriptがなくてもうまく機能します。
制御選択のReactコンポーネント にこの答えをどのように採用したかを追加したいのですが、それを理解するために何度か試してみました。 react-selectを組み込んでそれを実行するのは本当に簡単ですが、このリポジトリで提供されている驚くべき機能が必要でない限り、問題のプロジェクトには必要ありません。 react-selectは、さまざまなinputsおよびhtml要素の複雑なシステムを介して、選択内のプレースホルダーを処理します。
Reactでは、 制御されたコンポーネント の場合、selected属性をオプションに追加することはできません。 Reactは、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をスタイルすることができます
select:invalid { color: gray; }
Angular 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ソリューションは私のために働きました：
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>がんばろう...