it-swarm.com.de

CSS für den "Abwärtspfeil" eines <select> -Elements?

Kann der Abwärtspfeil auf einem Dropdown-Auswahlelement stilisiert werden? (<select><option>--></option></select>)

Ich vermute, die Antwort ist nein, weil IE dieses Element behandelt. Wenn es keinen Weg gibt, weiß jemand, dass ein "gefälschtes" Dropdown-Feld mit JavaScript verwendet wird, das dieses Verhalten nachahmen würde, mir aber die Möglichkeit zur Anpassung gibt?

36
bugfixr

Vielleicht können Sie jQuery selectbox ersetzen verwenden. Es ist ein jQuery-Plugin.

12
Jan Hančič

Es gibt eine coole Lösung, die nur für CSS geeignet ist: http://bavotasan.com/2011/style-select-box-using-only-css/

Umschließen Sie das select in einem Container div, formatieren Sie das select um 18px breiter als der Container mit transparentem Hintergrund, geben Sie overflow: für den Container verborgen (um den vom Browser generierten Pfeil abzuschneiden), und fügen Sie das Hintergrundbild stilisiert hinzu Pfeil zum Behälter. 

Funktioniert nicht in IE7 (oder 6), aber im Ernst, ich sage, wenn Sie IE7 verwenden, verdienen Sie ein weniger hübsches Dropdown-Erlebnis.

49
jabram

Nein, der Abwärtspfeil ist ein Browserelement. Es ist in jedem Browser integriert. Sie können das Auswahlfeld jedoch durch ein benutzerdefiniertes Dropdown-Feld mit Javascript ersetzen.

Jan Hancic erwähnte ein jQuery-Plugin, um genau das zu tun.

5
Ty.

Die Dropdown-Liste enthält Elemente auf Plattformebene. Sie können kein CSS darauf anwenden.

Sie können ein Bild mit CSS darüber legen und das Klickereignis im darunter liegenden Element aufrufen.

Mit CSS lassen sich Combos nicht sehr gut gestalten.

Die Jungs von FogBugz haben mit JavaScript eine ziemlich gute benutzerdefinierte Kombination erstellt, also ist es möglich. 

Halten Sie sich besser an den Standard für Version 1 und prüfen Sie, ob es sich lohnt, ihn zu aktualisieren, sobald sich Ihre App in der Wildnis befindet.

3
Neil Barnwell

Ich weiß nicht, ob es mit CSS (wahrscheinlich nicht in IE) stylbar ist, aber bitte: Verwenden Sie kein "falsches" Dropdown-Feld mit Javascript, da die Verwendbarkeit dieser Dinge in der Regel schrecklich ist. Unter anderem fehlt die Tastaturnavigation. 

2
wvanbergen

Sie können dies nur mit CSS und dem Pfeil nach unten als absolut positioniertes Bild mit einem "Zeigerereignis: keine;" siehe mein Beispiel unten:

<select>
  <option value="1">1 Person</option>
  <option value="2">2 People</option>
</select>
<img class="passthrough" src="downarrow.png" />

.passthrough {
    pointer-events: none;
    position: absolute;
    right: 0;
}
1
MayhemBliz

Versuche dies

   <div style='position:relative;left:0px;top:0px;
        onMouseOver=document.getElementById('visible').style.visibility='visible' 
        id='hidden'>10
   <select style='position:absolute;left:0px;top:0px;cursor:pointer;visibility:hidden;'
        onMouseOut=document.getElementById('visible').style.visibility='hidden'
        onChange='this.form.submit()' 
        id='visible' multiple size='3'>";
   <option selected value=10>10</option>
   <option value=20>20</option>
   <option value=50>50</option>
   </select>
   </div>
0
rubbermind

Sie müssen ein eigenes Dropdown-Menü mit versteckten divs und einem versteckten Eingabeelement erstellen, um aufzuzeichnen, welche Option "ausgewählt" wurde. Meine Vermutung ist, dass @Jan Hancics Link, den er gepostet hat, wahrscheinlich das ist, wonach Sie suchen. 

0
localshred

Dadurch werden die Eingaben geändert, usw. in den alten Stilgrau gesetzt. Sie sind sich nicht sicher, ob Sie danach manipulieren können: In <head> put:

<meta http-equiv="MSThemeCompatible" content="NO">
0
marsupial