在下拉菜单中更改占位符的颜色 [英] Changing color of placeholder in dropdown

问题描述

您可以在这里看到我正在处理的表单：

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

这是下拉预算的代码：

 < td>< select id =budgetstyle =width：420px;> 
< option value =>选择您的预算< / option> 
< option value =250> $ 250  -  $ 500 per month< / option> 
< option value =500> $ 500  -  $ 750每月< / option> 
< option value =750> $ 750  -  $ 1000每月< / option> 
< option value =100> $ 1000  -  $ 1500 per month< / option> 
< option value =1500> $ 1500  -  $ 2500 per month< / option> 
< option value =2500> $ 2500  -  $ 5000每月< / option> 
< option value =5000> $ 5000  -  $ 7500每月< / option> 
< option value =7500> $ 7500  -  $ 10000 per month< / option> 
< option value =10000>每月$ 10,000或更多< / option> 
< / select>< / td> 
  

如何使选择您的预算与其余的灰色文字相同的占位符是默认的，然后选择预算时，文本是较暗的颜色。我只是试图基本上使它与表单的其余部分使用的配色方案匹配... ...

解决方案

您可以使用伪类选项：选中

 < style> 
 #budget选项：已选中{
颜色：红色; 
} 
< / style> 
  

请看这个演示： http://jsbin.com/gilip/1

You can see the form I'm working on here:

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

This is the code for the drop down budget:

            <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>

How can I make it so that "Choose Your Budget" is the same gray colored text as the rest of the placeholders are by default and then when a budget is selected that text is the darker color. I'm just trying to basically make it match the color scheme the rest of the form is using...

解决方案

You can use pseudo class option:checked

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

look at this demo: http://jsbin.com/gilip/1

这篇关于在下拉菜单中更改占位符的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！