Wie kann das erste Element in einem auswählen?

Ich habe dieses Beispiel:Wie kann das erste Element in einem auswählen?

HTML-Code:

<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; 
}

Ich habe einen Wunsch nur zu erkennen und wählen Sie die erstes Element in der Liste. Das erste Element soll rot und das andere zum Beispiel grau sein.

Gibt es eine Möglichkeit, dies zu tun? Ich habe den obigen Code versucht, funktioniert aber nicht. Kannst du mir bitte sagen, was los ist?

Vielen Dank im Voraus!

Quelle

2016-03-29 John Smith

Es ist richtig gefärbt. Wenn Sie das Dropdown-Menü öffnen, wird das erste Element rot angezeigt. Wenn Sie versuchen, die Farbe von "Auswählen" auch dann auf Rot zu setzen, wenn sie ausgewählt ist (während die anderen bei der Auswahl grau bleiben), dann ist das mit CSS nicht möglich. – Harry

wie diese https://jsfiddle.net/Lcv1eqzs/1/ –

@Harry, ja wählen wird nicht rot, aber wenn Benutzer auf Drop-Down klicken, dann in diesem offenen Drop-Down, können wir Farbe sehen .. zustimmen mit Ihnen. –

Ich habe im Code-Schnipsel vorgenommenen Änderungen. Überprüfen Sie bitte das.

ist das so, wie Sie wollen?

$(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>

Quelle

2016-03-29 05:43:48

zu Ihnen funktioniert es mir hat nichts geändert, nachdem ich den Code hinzugefügt blieb die gleiche Farbe ... –

Vielleicht habe ich falsch verstanden, aber was für einen Unterschied macht dies zu OP-Code? Sie haben nicht einmal ein Item, das im HTML mit "value =" 0 "' übereinstimmt. – Harry

Sorry mein Fehler @Harry. Ich nehme es als eine andere Art und Weise –

Versuchen Sie folgendes:

select:first-child{color: red;}

Quelle

2016-03-29 05:42:33

Dadurch wird das erste Element in einer Auswahl nicht formatiert. Es wird das select formatieren, das das erste Kind seines Elternteils ist. Es gibt einen Unterschied zwischen diesen beiden. – Harry

Verwenden n-of-Typ (1)

option:nth-of-type(1) 
{ 
    color: red; 
}

Quelle

2016-03-29 05:58:16 AceLearn

Nun etwas annimmt.

Ich glaube, Sie wollen Ihre <option value="visa">Visa</option> rot zu färben, aber beachten Sie, dass diese zweite Option ist dieses css so verwenden

select.select-full option:nth-child(2){ 
    color:red; 
}

Geige Link: https://jsfiddle.net/yudi/L439rrsd/

Quelle

2016-03-29 05:59:12

Wie kann das erste Element in einem auswählen?

Antwort

Verwandte Themen