在下拉列表中更改占位符的顏色

Question

你可以在這里看到我正在處理的表格：

http://www.escalateinternet.com/free-quote.php

這是下拉預算的代碼：

            <td><select id="budget" style="width:420px;">
                <option value="">Choose Your Budget</option>
                <option value="250">$250-$500 Per Month</option>
                <option value="500">$500-$750 Per Month</option>
                <option value="750">$750-$1000 Per Month</option>
                <option value="100">$1000-$1500 Per Month</option>
                <option value="1500">$1500-$2500 Per Month</option>
                <option value="2500">$2500-$5000 Per Month</option>
                <option value="5000">$5000-$7500 Per Month</option>
                <option value="7500">$7500-$10000 Per Month</option>
                <option value="10000">$10,000 or More Per Month</option>
            </select></td>

如何使其成為“選擇預算”是與占位符的其余符號相同的灰色文本，然后選擇預算時，該文本是較暗的顏色。 我只是想讓它基本上與表單其余部分使用的配色方案相匹配......

Answer 1

如何為“選擇”框制作占位符？

簡而言之， select元素不支持占位符，並且您想要做的事情在 css 中無法實現。 然而; 一些簡單的 JS 可以幫助我們。

（我假設你會使用 jQuery）

$(document).ready(function(){
    $('select').on('change', function(){ //attach event handler to select's change event. 
                                        //use a more specific selector

        if ($(this).val() === ""){ //checking to see which option has been picked

            $(this).addClass('unselected'); 
        } else {                   // add or remove class accordingly
            $(this).removeClass('unselected');
        }

    });
});

獎勵編輯：if/else 塊可以重構為一行（參見jquery .toggleClass() ）：

$(this).toggleClass('unselected', $(this).val() === "");

我還建議給它disabled屬性。 然后你可以添加這樣的樣式：

select{
    color: black;
}
select.unselected{
    color: gray;
}
//edit: you might want to do this to make it that bit nicer:
select option:first-child{
    display: none;
} 

不要忘記給select元素一個初始類unselected 。

希望這可以幫助！

Answer 2

這是我如何使用占位符文本顏色為淺灰色、普通文本白色和背景黑色的方法。 焦點移開后，所選選項仍為白色。

select {
    color: #fff!important;
    background-color: #000!important;
}
select:invalid {
    color: #535353!important;
}
select:focus {
    color: #fff!important;
}

Answer 3

不使用 jQuery 的簡單方法。

    select {
            color: #aaa; /* default unselected color */
    }

    select:focus {
            color: red; /* color when focused */
    }

    #budget option:checked{
            color: red; /* color when selected but not focused */
    }

Answer 4

如果下拉列表是必填字段，則可以使用:invalid偽類。 根據 MDN ：

:invalid CSS 偽類表示內容無法驗證的任何<input>或其他<form>元素。

這意味着當所選選項的值為空時（即value="" ）， :invalid偽類選擇器將在<select>元素上處於活動狀態，因為需要一個值。 看我下面的例子：

 /* 1 - Disable default browser styling */ select { border: 1px solid #999; } /* 2 - Style default state using the :invalid pseudo-class */ select:invalid { color: red; }

 <select name="color" required> <option value="" selected>Select a size</option> <option value="sm">Small</option> <option value="md">Medium</option> <option value="lg">Large</option> </select>

Answer 5

這是一種純 JavaScript 方式（基於 Bill 的回答），因為仍然沒有純 html/css 方式來做到這一點（我知道）。

編輯：您可以在占位符選項上設置禁用屬性，但這並非所有瀏覽器都支持，並且您無法根據選項屬性設置選擇樣式。

 [].forEach.call(document.querySelectorAll('select'), function(currentSelect) { // Trigger placeholder method for the first time updatePlaceholder(currentSelect); // Bind change event to every select that is found on the page. currentSelect.addEventListener('change', function() { updatePlaceholder(this); }); }); function updatePlaceholder(select) { select.classList.toggle('unselected', !select[select.selectedIndex].value); }

 select.unselected { opacity: .5; filter: grayscale(); }

 <select id="budget" style="width:420px;"> <option value="">Choose Your Budget</option> <option value="250">$250-$500 Per Month</option> <option value="500">$500-$750 Per Month</option> <option value="750">$750-$1000 Per Month</option> <option value="100">$1000-$1500 Per Month</option> <option value="1500">$1500-$2500 Per Month</option> <option value="2500">$2500-$5000 Per Month</option> <option value="5000">$5000-$7500 Per Month</option> <option value="7500">$7500-$10000 Per Month</option> <option value="10000">$10,000 or More Per Month</option> </select>

Answer 6

注意：

經過六年多的回答，在某些瀏覽器中，此代碼段不再按預期運行。 例如，在當前的 FireFox 版本中。 但是，在 Opera 70.0.3728.95 中，它仍然有效。

您可以使用偽類option:checked

<style>
    #budget option:checked{
      color:red;
    }
  </style>

看看這個演示： http : //jsbin.com/gilip/1