怎樣才能選擇第一個項目的顏色？

代碼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

怎樣才能選擇第一個項目的顏色？

回答

相關問題