選択リストの最初のオプションの色を変更する方法

Question

選択したドロップダウンリストの最初のオプションカラーを作成できませんでした。 「選択」に色を適用すると、すべてのオプションが変更されています。どのように最初のオプションだけを変更するには？

マイコード：

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

Answer 1

を、私はそれはあなたが何をしたいと思う
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/（純粋なJSでの作業を参照するHTML/JSのコメントを解除）

が確実にCSSであなたは（特に色）選択のオプションをスタイルすることができません、それは

Answer 2

以下のCSSを追加します。

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

Answer 3

をこれはあなたのために働くかもしれません。これを試してみてください：私はあなたのコメントを理解した内容により、

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