Ich versuche, eine Dropdown-Liste mit Auswahloptionen zu gestalten. Ist es möglich, die Schriftgröße der Optionen vom Standardwert zu unterscheiden? Zum Beispiel der Standardwert:
-- Select Country --
wäre die Größe 7pt; und eine der Optionen,
Georgia
würde die Größe 13pt haben.
Dies ist meine Dropdown-Liste:
.select_join {
width: 170px;
height: 28px;
overflow: hidden;
background: url('http://s24.postimg.org/lyhytocf5/dropdown.png') no-repeat right #FEFEFE;
border: #FEFEFE 1px solid;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0px 0px 10px 1px #FEFEFE;
box-shadow: inset 0px 0px 10px 1px #FEFEFE;
}
.select_join select {
background: transparent;
width: 170px;
font-size:7pt;
color:grey;
border: 0;
border-radius: 0;
height: 28px;
-webkit-appearance: none;
}
.select_join select:focus {
outline: none;
}
<div style="background-color:pink;height:150px; text-align:center;">
<br/>
<div class="select_join" style="margin-left:15px">
<select name="txtCountry">
<option>-- Select Country --</option>
<option value="1">Georgia</option>
<option value="2">Afghanistan</option>
</select>
</div>
</div>
Siehe auch meine [Demo auf JSFiddle](
).Leider funktioniert es nur auf Firefox. Könnte es sein, dass andere Browser das Styling von <option>
Elementen nicht unterstützen?
Browser, auf denen ich getestet habe:
Fügen Sie dem Tag <option>
eine CSS-Klasse hinzu, um ihn zu gestalten: [
Derzeit unterstützen WebKit-Browser dieses Verhalten nicht, da es in der Spezifikation nicht definiert ist. Werfen Sie einen Blick auf dies: How to style a select tag's option element?
Sagen Sie dem Optionselement, dass es 13pt sein soll
select option{
font-size: 13pt;
}
und dann das erste Optionselement auf 7pt setzen
select option:first-child {
font-size: 7pt;
}
Laufende Demo:
Versuchen Sie dies
CSS fügen Sie Ihren Code hinzu
.select_join option{
font-size:13px;
}