html - 更改下拉列表中占位符的颜色

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

How do I make a placeholder for a 'select' box? 可能重复

简而言之，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 block 可以重构为一行(参见 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。

希望这对您有所帮助!