怎样才能选择第一个项目的颜色？

代码HTML：

<select name="card_type" id="card_type" class="select-full"> 
    <option value="">Select</option> 
    <option value="visa">Visa</option> 
    <option value="mastercard">Mastercard</option> 
    <option value="discovery">Discovery</option> 
    <option value="maestro">Maestro</option> 
</select>

CODE CSS：

select 
{ 
    color: #ccc; 
} 
option 
{ 
    color: #000; 
} 
option:first-child 
{ 
    color: red; 
}

我有一个愿望，以发现和只选择列表中的第一项。第一个元素是红色的，另一个是灰色的，例如。

有没有可能做到这一点？我试过上面的代码，但不起作用。你能告诉我什么是错的吗？

在此先感谢！

来源

2016-03-29 John Smith

这是正确着色。如果你打开下拉菜单，你会看到红色的第一个项目。如果您尝试将“选择”的颜色设置为红色，即使选择了颜色（而其他颜色在选中时仍保持灰色），那么我认为使用CSS无法实现。 – Harry

像这样https://jsfiddle.net/Lcv1eqzs/1/ –

@哈利，是的选择不会红，但当用户点击下拉，然后在打开的下拉列表中，我们可以看到颜色..与您同意。 –

我进行了更改。请检查一下。

这是你想要的方式吗？

$(document).ready(function(){ 
 
    if($(this).val() == 0){ 
 
     $('select').css("color","red"); 
 
    } 
 
    else{ 
 
     
 
     $('select').css("color","#000") 
 
    } 
 
    $('select').change(function(){ 
 
    
 
    if($(this).val() == 0){ 
 
     $('select').css("color","red"); 
 
    } 
 
    else{ 
 
     
 
     $('select').css("color","#000") 
 
    } 
 
    }) 
 
})

select 
 
{ 
 
    color: #ccc; 
 
} 
 
option 
 
{ 
 
    color: #000; 
 
} 
 
option:first-child 
 
{ 
 
    color: red; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="card_type" id="card_type" class="select-full"> 
 
    <option value="0">Select</option> 
 
\t \t \t \t \t \t \t \t \t  <option value="visa">Visa</option> 
 
\t \t \t \t \t \t \t \t \t  <option value="mastercard">Mastercard</option> 
 
\t \t \t \t \t \t \t \t \t  <option value="discovery">Discovery</option> 
 
\t \t \t \t \t \t \t \t \t  <option value="maestro">Maestro</option> 
 
\t \t \t \t \t \t \t \t </select>

来源

2016-03-29 05:43:48

对你它适用于我没有改变任何东西后，我添加的代码保持相同的颜色... –

也许我误解了，但这与OP的代码有什么不同？您甚至没有在HTML中匹配“value =”0“”的项目。 – Harry

抱歉我的错误@哈里。我认为它是一种不同的方式 –

试试这个：在片段

select:first-child{color: red;}

来源

2016-03-29 05:42:33

这不会设计选择中的第一项。它将样式选择是其父项的第一个子项。这两者之间有区别。 – Harry

使用第n-的式（1）

option:nth-of-type(1) 
{ 
    color: red; 
}

来源

2016-03-29 05:58:16 AceLearn

那么假设的东西。

我想你想你的<option value="visa">Visa</option>到红色，但请注意，这是第二个选项，以便使用CSS

select.select-full option:nth-child(2){ 
    color:red; 
}

小提琴链接：https://jsfiddle.net/yudi/L439rrsd/

来源

2016-03-29 05:59:12

怎样才能选择第一个项目的颜色？

回答

相关问题