Ich versuche, den Pfeil einer Auswahl durch ein eigenes Bild zu ersetzen. Ich füge die Auswahl in ein Div mit derselben Größe ein, ich setze den Hintergrund der Auswahl als transparent und ich füge ein Bild (mit derselben Größe wie der Pfeil) in die rechte obere Ecke des Div als Hintergrund ein.
Es funktioniert nur in Chrome.
Wie kann ich dafür sorgen, dass es in Firefox und IE9 funktioniert, wo ich Folgendes bekomme:
.styled-select {
width: 100px;
height: 17px;
overflow: hidden;
overflow: -moz-hidden-unscrollable;
background: url(images/downarrow_blue.png) no-repeat right white;
border: 2px double red;
display: inline-block;
position: relative;
}
.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 100px;
font-size: 11px;
border: 0;
height: 17px;
position: absolute;
left: 0;
top: 0;
}
body {
background-color: #333333;
color: #FFFFFF;
}
.block label {
color: white;
}<HTML>
<HEAD>
</HEAD>
<BODY>
<p/>
<form action="/prepareUpdateCategoryList.do?forwardto=search">
<fieldset class="block" id="searchBlock">
<p>
<label style="width:80px">Class</label>
<div class="styled-select">
<select property="voucherCategoryClass">
<option value="0">Select </option>
<option value="7382">steam </option>
</select>
</div>
</p>
</fieldset>
</form>
</BODY>
</HTML>
appearance: menulist !important;-moz-appearance: menulist !important;-webkit-appearance: menulist !important;-o-appearance: menulist !important;Ich habe einen
selectmit einem benutzerdefinierten Pfeil eingerichtet, der Julios Antwort ähnelt, jedoch keine festgelegte Breite hat und einensvgals Hintergrundbild verwendet. (arrow_drop_downvon Material-UI-Symbolen)Wenn Sie es auch für den IE benötigen, aktualisieren Sie den SVG-Pfeil auf base64 und fügen Sie Folgendes hinzu:
Verwenden Sie dieses SVG, um die Größe und den Abstand des Pfeils zu vereinfachen:
Es hat keinen Abstand an den Pfeilseiten.
quelle
background-position: top 5px right 4px;background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') 100% 50% no-repeat transparent;background-position-y: 5px;anstelle von% (z. B.background-position-y: 50%;) verwenden?Arbeiten mit nur einer Klasse:
http://jsfiddle.net/qhCsJ/4120/
quelle
background-position-x: calc( 100% - 5px );Hier ist eine elegante Korrektur, die eine Spanne verwendet, um den Wert anzuzeigen.
Das Layout ist wie folgt:
JsFiddle
quelle
Dies funktioniert besonders gut, wenn Sie Bootstrap verwenden, das in den neuesten Browserversionen getestet wurde:
quelle
Überprüfen Sie dieses Es ist hacky, einfach so:
-prefix-appearanceaufnonedie Stile zu entfernentext-indentdiese Option , um den Inhalt etwas nach rechts zu "verschieben"text-overflowschließlich eine leere Zeichenfolge. Alles, was über seine Breite hinausgeht, wird ... nichts! Und dazu gehört auch der Pfeil.Jetzt kannst du es so stylen, wie du willst :)
Ansicht auf JSFiddle
quelle
Es funktioniert in allen Browsern:
quelle
Gestalten Sie die Beschriftung mit CSS und verwenden Sie Zeigerereignisse:
und das relative CSS ist
Ich habe hier nur einen Abwärtspfeil verwendet, aber Sie können einen Block mit einem Hintergrundbild festlegen. Hier ist ein hässliches Geigenbeispiel: https://jsfiddle.net/1rofzz89/
quelle
Ich habe auf diesen Beitrag verwiesen , er hat wie ein Zauber funktioniert, außer dass der Pfeil im IE-Browser nicht ausgeblendet wurde.
quelle
Angenommen, selectDrop ist die Klasse, die in Ihrem HTML-Tag vorhanden ist. So viel Code reicht aus, um das Standardpfeilsymbol zu ändern:
quelle