如何更改选择列表的第一个选项的颜色

我无法使选定的下拉列表的第一个选项颜色。当我们为“选择”应用颜色时，所有选项都会发生变化。如何仅更改第一个选项？如何更改选择列表的第一个选项的颜色

我的代码：下面

#step3-drpdwn { 
 
    width: 100%; 
 
    border: 1px solid #ccc; 
 
    margin-bottom: 25px; 
 
    height: 34px; 
 
    color: #ccc; 
 
} 
 
#step3-drpdwn>option:not(:first-child) { 
 
    color: #000; 
 
} 
 
#step3-drpdwn>option:first-hand { 
 
    color: #ccc; 
 
}

<select class="btn btn-md" id="step3-drpdwn"> 
 
\t <option disabled selected> 
 
\t \t Your Designation or Role in the Company 
 
\t </option> 
 
\t <option> 
 
\t \t Chairman 
 
\t </option> 
 
\t <option> 
 
\t \t President 
 
\t </option> 
 
\t <option> 
 
\t \t CEO 
 
\t </option> 
 
\t <option> 
 
\t \t Director 
 
\t </option> 
 
\t <option> 
 
\t \t Proprietor 
 
\t </option> 
 
</select>

来源

2017-03-09 Pkprabu

您将无法风格选择选项（颜色特别是）与CSS可靠在所有浏览器中。使用自定义选择，如果你真的需要它。 – dfsq

我想我不明白你的问题...选定的项目是灰色的，所有其他人仍然是黑色的......这不是你想要的吗？ –

这可能有助于 - > http://stackoverflow.com/a/37773973/5561605 – sol

通过就我的理解您的评论的，我认为这是你想要的
HTML

<select class="btn btn-md" id="step3-drpdwn" onchange="setColor(this);"> 
     <option disabled selected> 
      Your Designation or Role in the Company 
     </option> 
     <option> 
      Chairman 
     </option> 
     <option> 
      President 
     </option> 
     <option> 
      CEO 
     </option> 
     <option> 
      Director 
     </option> 
     <option> 
      Proprietor 
     </option> 
    </select>

和JS

function setColor(dropdown){ 
    dropdown.style.color = "black"; 
};

或者如果您正在使用JQuery

$(document).ready(function(){ 
    $("#step3-drpdwn").on("change", function(){ 
     $(this).css("color", "#000"); 
    }); 
});

这里的小提琴https://fiddle.jshell.net/qyLgorm8/1/（取消对HTML/JS看到用纯JS的工作）

希望它可以帮助

来源

2017-03-10 08:26:07

这正是我想要的:)非常感谢你:) – Pkprabu

@Pkprabu乐于帮助！ \ O / –

添加CSS：

select#step3-drpdwn option:first-child{ 
    background: #ccc; 
    color: red; 
}

来源

2017-03-09 09:11:17

谢谢Nisse Engstrom。但是，这不是我所期望的。当选择第一个孩子时，它应该是灰色的，当我选择其他孩子时，那些应该是黑色的。 – Pkprabu

这可能为你工作。试试这个：

$('#step3-drpdwn').change(function() { 
    $('#step3-drpdwn').css("background", $("select option:selected").css("red")); 
});

来源

2017-03-09 09:17:19

谢谢你Saugat Bhattarai。但是，它不适合我。 – Pkprabu

如何更改选择列表的第一个选项的颜色

回答

相关问题