Как можно выбрать первый элемент в списке?

У меня есть этот пример:Как можно выбрать первый элемент в списке?

КОД 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>

КОД CSS:

select 
{ 
    color: #ccc; 
} 
option 
{ 
    color: #000; 
} 
option:first-child 
{ 
    color: red; 
}

У меня есть желание, чтобы определить и выбрать только первый элемент в списке. Первый элемент - красный, а другой - серый.

Есть ли возможность сделать это? Я пробовал вышеуказанный код, но не работал. Не могли бы вы рассказать мне, что не так?

Заранее благодарен!

источник

2016-03-29 John Smith

Это правильно пестрой. Если вы откроете раскрывающийся список, вы увидите первый элемент красного цвета. Если вы пытаетесь установить цвет «Выбрать» на красный, даже если он выбран (тогда как остальные остаются серыми, если выбрано), то я не думаю, что это возможно с помощью CSS. – Harry

вот так https://jsfiddle.net/Lcv1eqzs/1/ –

@Harry, да выбор не будет красным, но когда пользователь нажмет на выпадающее меню, то в этом открытом раскрытии мы увидим цвет .. соглашайтесь с вами. –

Я внес изменения в сниппет. Пожалуйста, проверь это.

Это так, как вы хотите?

$(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? У вас даже нет элемента, соответствующего 'value =" 0 "' в HTML. – Harry

Жаль мою ошибку @ Харри. Я воспринимаю это как другой способ –

Попробуйте это:

select:first-child{color: red;}

источник

2016-03-29 05:42:33

Это не будет стиль первого элемента в списке. Он будет стилировать выбор, который является первым дочерним элементом его родителя. Есть разница между этими двумя. – Harry

Использование п-го из-типа (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

Как можно выбрать первый элемент в списке?

ответ

Смежные вопросы