如何為』select』框創建佔位符？

問題描述

我正在使用佔位符的文本輸入，這是正常工作正常。但是我也想為我的選擇框使用佔位符。當然我可以用這個代碼：

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

但是，「選擇你的選項」是黑色而不是 lightgrey 。所以我的解決方案可能是 CSS-based 。 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'風格只是使列表框看起來’nice’ 。

注意：在”placeholder” 選項上使用一個空的 value 屬性允許驗證 (必需屬性) 使用”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 月)：

刪除了 style="display: none"贊成 HTML5 屬性 hidden，得到了廣泛的支持。 hidden 元素具有與 Safari 中的 display: none 相似的特徵，IE(Project Spartan 需要檢查)，option 在下拉菜單中可見，但不可選。

更新 (2016 年 1 月)：

當 select 元素是 required 時，它允許使用:invalid CSS pseudo-class，它允許您在「佔位符」狀態下對 select 元素進行樣式化。由於佔位符 option 中的空值，:invalid 在此處工作。

一旦設置了一個值，:invalid pseudo-class 將被丟棄。如果您願意，也可以選擇使用:valid 。

大多數瀏覽器支持此 pseudo-class 。 IE10 +。這最適合自定義樣式的 select 元素; 在某些情況下 (即 Chrome /Safari 中的 Mac)，您需要更改 select 框的默認外觀，以便某些樣式顯示為 background-color，color 。您可以在 developer.mozilla.org 找到一些關於兼容性的例子。

原生元素外觀 Mac 中的 Chrome：

在 Chrome 中使用更改的邊框元素 Mac：

第三種解決方案

對於必需的字段，現代瀏覽器中有一個 pure-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/

第五種方案

我剛剛在下面的選項中添加了隱藏的屬性，這對我來説是正常的。



<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 類，以防再次選擇第一個選項:)

第八種方案

我看到正確的答案的跡象，但把它全部在一起這將是我的解決方案。



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>

第十種方案

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');
    }
});

JSFiddle

參考文獻

How do I make a placeholder for a ‘select’ box?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

如何為』select』框創建佔位符？