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

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

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは3日間一緒に夫と一緒に寝て、25年経ってもまだ夫と結婚しています

ケイト・ブランシェットは、夫に会ったとき、典型的な交際のアドバイスに逆らいました。

マイケルシーンが非営利の俳優である理由

マイケルシーンが非営利の俳優である理由

マイケルシーンは非営利の俳優ですが、それは正確にはどういう意味ですか?

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

ホールマークスターのコリンエッグレスフィールドがRomaDramaLiveでスリル満点のファンと出会う![エクスクルーシブ]

特徴的なスターのコリン・エッグレスフィールドは、RomaDrama Liveでのスリル満点のファンとの出会いについて料理しました!加えて、大会での彼のINSPIREプログラム。

「たどりつけば」をオンラインでストリーミングできない理由

「たどりつけば」をオンラインでストリーミングできない理由

ノーザンエクスポージャーが90年代の最も人気のある番組の1つになった理由を確認するには、Blu-rayまたはDVDプレーヤーをほこりで払う必要があります。

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

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

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

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖:アクセスは簡単ではありませんが、ハイキングする価値があります

ドミニカのボイリング湖は、世界で2番目に大きいボイリング湖です。そこにたどり着くまでのトレッキングは大変で長いですが、努力する価値は十分にあります。

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

私たちの水をきれいに保つのを助けるためにあなたの髪を寄付してください

サロンからのヘアトリミングや個人的な寄付は、油流出を吸収して環境を保護するのに役立つマットとして再利用できます。

ホワイトハウスの最も記憶に残る結婚式を見てください

ホワイトハウスの最も記憶に残る結婚式を見てください

過去200年以上の間にホワイトハウスで結婚したのはほんの数人です。彼らは誰でしたか、そしてそこで結婚式を獲得するために何が必要ですか?

グッドジョブ、ESPN

グッドジョブ、ESPN

今日のホワイトハウスの記者会見で、報道官のサラ・ハッカビー・サンダースは、スポーツセンターのホストであるイェメル・ヒルのドナルド・トランプに関する最近のツイートについてコメントするよう求められ、大統領と彼の政策を白人至上主義者として説明した。ヒルは彼女のつぶやきのためにESPNによって公に叱責されました。

アマゾンからのこのレミントンツールセールで髪を整える、スタイルを整える、乾かす、または取り除く

アマゾンからのこのレミントンツールセールで髪を整える、スタイルを整える、乾かす、または取り除く

基本的に頭のあらゆる部分から髪の毛を整えたり、ブロードライしたり、まっすぐにしたり、脱毛したりする必要がある場合は、このレミントンゴールドボックスが最適です。今日だけ、Amazonは、すでに人気のあるShortcut Pro Self-HaircutKitやPearlPro Ceramic Flat Ironのように、グルーミングをはるかに簡単にするヘアツールをマークダウンしています。

カナダの元桂冠詩人が、史上最高の文化の盗用でトゥパックとマヤアンジェロウから盗んだ

カナダの元桂冠詩人が、史上最高の文化の盗用でトゥパックとマヤアンジェロウから盗んだ

トゥパックシャクール(ティムモーゼンフェルダー/ゲッティイメージズ); マヤアンジェロウ(マーティンゴッドウィン/ゲッティイメージズ)移動、テイラースウィフト。ケンドールとカイリーは、必要な数の座席を持っています。

テスラは、ハリケーンイルマによる避難を容易にするために、フロリダでの車両の範囲を拡大しています

テスラは、ハリケーンイルマによる避難を容易にするために、フロリダでの車両の範囲を拡大しています

写真:Tesla Motorsフロリダに住んでいて、Tesla Model S、Model X 60、またはModel 60Dを使用している場合、車の自律性は50 km(約30マイル)高くなります。これは失敗ではなく、ハリケーンイルマによる避難作業を容易にするために会社自身が命じた自治権の一時的な延長です。

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya Wishes Boyfriend Tom Holland Happy Birthday with Cuddly Photo: He 'Makes Me the Happiest'

Zendaya shared a sweet photo in honor of boyfriend Tom Holland's 26th birthday Wednesday

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

小さな女性:脳卒中を患った後に病院から解放されたアトランタのジューシーな赤ちゃん:「まだ癒し」

シーレン「Ms.JuicyBaby」ピアソンは、先月脳卒中で入院した後、「もう一度たくさんのことをする方法を学ばなければならない」ため、言語療法を受けていることを明らかにしました。

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

エマストーンは彼女のクリフサイドマリブビーチハウスを420万ドルでリストアップしています—中を見てください!

オスカー受賞者の世紀半ばの家には、3つのベッドルーム、2つのバス、オーシャンフロントの景色があります。

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、母乳育児の経験の中で、彼女は「本当に、本当に落ち込んでいる」と言います

ジーニー・メイ・ジェンキンスは、生後4か月の娘、モナコに母乳育児をしていると語った。

投資ノート:Bioscout AU$300万シード

投資ノート:Bioscout AU$300万シード

Bioscoutは、農家を運転席に置くという使命を負っています。Artesian(GrainInnovate)やUniseedと並んで、最新のシードラウンドでチームを支援できることをうれしく思います。問題真菌症による重大な作物の損失は、農民にとって試練であることが証明されています。

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

リトルマーケットリサーチ1| 2022年のクイックグリンプス遠隔医療市場

遠隔医療は、パンデミック後の時代では新しいものではなく、時代遅れの分野でもありません。しかし、業界を詳しく見ると、需要と供給の強力な持続可能性と、米国で絶え間ない革命となる強力な潜在的成長曲線を示しています。

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

スタートアップ資金調達環境:タイのスタートアップエコシステムの次は何ですか?

2021年は、世界的なベンチャーキャピタル(VC)の資金調達にとって記録的な年でした。DealStreetAsiaによると、東南アジアも例外ではなく、この地域では年間で記録的な25の新しいユニコーンが採掘されました。

ムーアの法則を超えて

ムーアの法則を超えて

計算に対する私たちの欲求とムーアの法則が提供できるものとの間には、指数関数的に増大するギャップがあります。私たちの文明は計算に基づいています—建築と想像力の現在の限界を超える技術を見つけなければなりません。

Language