如何更改選擇列表的第一個選項的顏色

我無法使選定的下拉列表的第一個選項顏色。當我們爲「選擇」應用顏色時，所有選項都會發生變化。如何僅更改第一個選項？如何更改選擇列表的第一個選項的顏色

我的代碼：下面

#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

如何更改選擇列表的第一個選項的顏色

回答

相關問題