Wählen Sie die Größenattributgröße in Chrome/Safari nicht aus?

Question

Wie Problem zu lösen, das Attribut Größe auswählen, wie in Code:

<select size="2"> 
    <option value="0" selected="selected">Default</option> 
    <option value="1">select 1</option> 
    <option value="2">select 2</option> 
    <option value="3">select 3</option> 
</select> 

Wie kann ich es in Chrome und Safari Arbeit bekommen?

Answer 1

Versuchen Sie, die CSS-Eigenschaft width der select-Tag:

select { 
    width:value px; 
} 

Answer 2

Dies ist ein known bug in webkit browsers.

Der einfachste Weg, um es in Chrome und Safari so zu gestalten, wie es Ihnen gefällt, ist die manuelle Festlegung des Designs, das Sie selbst auswählen.

Hier ist ein working jsFiddle.

HTML:

<select size="2"> 
    <option value="0" selected="selected">Default</option> 
    <option value="1">select 1</option> 
    <option value="2">select 2</option> 
    <option value="3">select 3</option> 
</select> 

CSS:

select { 
    height:36px; 
    font-size:14px; 
} 

Answer 3

ich die Größe Attribut in der HTML-Code für "andere" Browser verwenden und dann webkit Aussehen in CSS angeben. Andere Arten von Menülistenoptionen sind verfügbar, das Textfeld ist nicht das einzige. Und Sie müssen möglicherweise mit Höhe auf der Grundlage der Schriftgröße durcheinander bringen. Dadurch sieht es in allen Browsern gleich aus.

CSS

select{ 
    -webkit-appearance: menulist-textfield; 
    height: 45px; 
}