JavaScriptを使用して＃333にドロップダウンフィールドの選択を変更します。

Question

私は、プレースホルダテキストを持つドロップダウンフィールドと、それをクリックした後に選択するいくつかのオプションがあります。もともと、プレースホルダーのテキストは＃333で、選択するオプションもありました。私は正常に次のコードを使用してライトグレーにプレースホルダーテキストを変更：ここで

#estimation_popup select { 
    color: #b2b7c8 !important; 
} 
#estimation_popup select option { 
    color: #000000!important; 

は、結果を表示する視覚的である：

問題はオプションの後に持っていること、しかし、です私が＃333にしたいとき、色は薄い灰色です。私はなぜこれが起こっているのか理解していますが、私はそれがjavascriptを使ってこれを解決することしかできないと思います。ここで

は、オプションを選択したときに何が起こるかを示すために、視覚的である：

誰かが私には＃333に選択した値を変更することができますしてください。

Answer 1

入力を＃333にしたいと思っています。 JSをする必要はないと思います。入力には＃333のCSSを使用するだけです。私はあなたの質問が正しいことを願っています。

Answer 2

.mydropdown { 
 
    width: 240px; 
 
    height: 40px; 
 
    font-family: Open Sans; 
 
    overflow: hidden; 
 
    background-color: #FFF; 
 
    padding: 10px; 
 
    margin-right: 30px; 
 
    outline-color:lightgreen; 
 
    color:#333; 
 
} 
 
    
 
.mydropdown select { color: black; } 
 

 
.mydropdown option:not(:checked) { color: black; } 
 
    
 
.mydropdown option:checked { color: black; } 
 

 
.mydropdown option[disabled]:first-child { display: none; }

<select class="mydropdown"> 
 
    <option value="0" selected disabled>Seach</option> 
 
    <option value="1"> Result 1</option> 
 
    <option value="2"> Result 2</option> 
 
    <option value="3"> Result 3</option> 
 
</select>

Answer 3

あなたは、両方のオプションを変更したり、CSSでcolorプロパティを選択することができるはずです。

select { 
 
    color: #333; 
 
} 
 

 
option { 
 
    color: #000; 
 
}

<select> 
 
    <option value="yes">Yes</option> 
 
    <option value="notyet">Not yet</option> 
 
    <option value="hotsure">Not sure</option> 
 
</select>

Answer 4

セレクに必要属性を使用しますそれが無効であるときに選択する。プレースホルダオプションの値を ""に設定すると、で選択できます：無効！これをチェックアウト：

select { 
 
    color: black; 
 
} 
 

 
select option { 
 
    color: #333; 
 
} 
 

 
select:invalid, select option:disabled { 
 
    color: lightgrey; 
 
}

<select required> 
 
    <option value="" selected disabled="disabled">Click here to select</option> 
 
    <option value="1">Yes</option> 
 
    <option value="2">Not yet</option> 
 
    <option value="2">Not sure</option> 
 
</select>