Wie ändere ich die Farbe der blauen Hervorhebung im Dropdown-Feld?

Wie ändere ich bitte die blaue Markierung in diesem Dropdown?Wie ändere ich die Farbe der blauen Hervorhebung im Dropdown-Feld?

link to select box demo

Hier ist der Code: -

<html> 
<head> 
<title></title> 

<style> 
select { border:0; color:#EEE; background:transparent; 
font-size:20px; font-weight:bold; padding:2px 10px; width:378px; 
*width:350px; *background:#58B14C; -webkit-appearance: none; } 

#mainselection { overflow:hidden; width:350px; 
-moz-border-radius: 9px 9px 9px 9px; 
-webkit-border-radius: 9px 9px 9px 9px; 
border-radius: 9px 9px 9px 9px; 
box-shadow: 1px 1px 11px #330033; 
background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C; 
} 
</style> 

</head> 
<body> 

    <div id="mainselection"> 
    <select> 
    <option>Select an Option</option> 
    <option>Option 1</option> 
    <option>Option 2</option> 
    </select> 
    </div> 
</body> 
</html>

Ich mag würde die Markierungsfarbe ändern, grau, wenn dies möglich ist.

Quelle

2013-10-15 Jonathan Lyon

Mögliche doppelte Hilfe: http://stackoverflow.com/questions/1667086/changing-select-highlight-color/1667105 –

mögliches Duplikat von [Hintergrundfarbe der Auswahlliste ändern bei Hover] (http://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover) – George

Ich nicht denke du kannst. Sie können den Hintergrund der einzelnen Optionen festlegen, aber nicht die Hervorhebung. Vielleicht möchten Sie jQuery-Plugins, z. http://dev7studios.com/dropit/ –

Ja, Sie könnten den Hintergrund von select ändern, aber Sie können die Hervorhebungsfarbe nicht ändern (wenn Sie den Mauszeiger halten), indem Sie CSS verwenden!

Sie haben einige Optionen:

Ist select in ul, li Art wählen zu konvertieren und tun, was Sie mit diesem wollen.
Verwenden Sie Bibliotheken wie Choosen, Select2 oder jQuery Form Styler. Mit ihnen können Sie viel breiter und browserübergreifend stylen.

Quelle

2013-10-15 18:22:13

Select2 ist ziemlich anständig, nutzt das OS UX, aber übertreibt es nicht mit verrückt gestylten Selektoren, die die Leute einfach nicht benutzen können. Aber keine +1, denn es beantwortet nicht wirklich die Frage OP ... – ppumkin

@ppumkin Was? Willst du sagen, Kumpel, ich bin mir nicht sicher ?? –

Gerade gefunden, während auf der Suche nach einer Lösung. Ich habe getestet es nur 32.0.3 FF

box-shadow: 0 0 10px 100px #fff inset;

Quelle

2014-10-03 15:49:09

'Option auswählen: Hover { Box-Schatten: 0 0 10px 10px # e1358f Inset; } 'funktioniert, aber nur in FF und nur wenn Ihre Maus auf dem Element bleibt, wird es in dem Moment blau, wenn Sie sich von der Auswahlbox entfernen, während sie noch offen ist. –

Ich glaube, Sie sind für die outline CSS-Eigenschaft suchen (in Verbindung mit aktiven und schweben psuedo Attribute):

/* turn it off completely */ 
select:active, select:hover { 
    outline: none 
} 

/* make it red instead (with with same width and style) */ 
select:active, select:hover { 
    outline-color: red 
}

Vollständige Details des Umrisses, Umriss-Farbe, Umriss-Stil und Umriss-Breite https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Quelle

2014-11-20 01:01:57 Nick

Ich denke, das ist der Hintergrund Highlight und nicht der Fokus Umriss –

Dies funktioniert für Firefox und Chrome, fällt anmutig auf die Systemfarbe in IE. Stellen Sie sicher, dass Sie die Titeleigenschaft auf den Inhalt der Option festlegen. Hier können Sie die Hintergrund- und Vordergrundfarben einstellen.

select option:checked:after { 
    content: attr(title); 
    background: #666; 
    color: #fff; 
    position: absolute; 
    width: 100%; 
    left: 0; 
    border: none; 
}

Quelle

2015-02-17 12:56:20 user1830605

Das ist super hacky, aber es tut genau das, was ich wollte. Danke :) (Funktioniert auch mit Electron, FYI) – ShaneK

Funktioniert nicht in Chrome ... – JohnG

Funktioniert nicht in Chrome 63 oder Firefox 57 ... Und Pseudo-Elemente verwenden zwei Doppelpunkte? – Alexander

Um sowohl Stil der Hover Farbe und vermeiden, dass die OS Standardfarbe in Firefox, müssen Sie sowohl die Option wählt einen Box-Schatten hinzufügen und wählen Sie die Option: Erklärungen schweben, die Farbe der Box Einstellung -Schatten Sie sich bei "Option auswählen" auf die Hintergrundfarbe des Menüs ein.

select option { 
    background: #f00; 
    color: #fff; 
    box-shadow: inset 20px 20px #f00 
} 

select option:hover { 
    color: #000; 
    box-shadow: inset 20px 20px #00f; 
}

Quelle

2016-05-21 07:44:17 Guestation

Dies wird NICHT die blaue Farbe entfernen, die Sie erhalten, wenn Sie den Mauszeiger über die Dropdown-Optionen bewegen. – klokop

dies versuchen .. Ich weiß, es ist eine alte Post, aber es könnte jemand

select option:hover, 
    select option:focus, 
    select option:active { 
     background: linear-gradient(#000000, #000000); 
     background-color: #000000 !important; /* for IE */ 
     color: #ffed00 !important; 
    } 

    select option:checked { 
     background: linear-gradient(#d6d6d6, #d6d6d6); 
     background-color: #d6d6d6 !important; /* for IE */ 
     color: #000000 !important; 
    }

Quelle

2018-01-22 11:33:56 tercou1

Wie ändere ich die Farbe der blauen Hervorhebung im Dropdown-Feld?

Antwort

Verwandte Themen