Wählen Sie mehrere mit Hintergrundbild

Okay, hier ist der Deal. Ich habe ein <select multiple> Tag mit einem Hintergrundbild. So, jetzt, wenn ich nach unten scrollen, bewegt sich das Hintergrundbild nicht mit dem Text nach oben. Und ich bekomme diesen Effekt:Wählen Sie mehrere mit Hintergrundbild

Das linke Bild ist vor und das Recht ist, nachdem ich scrollen

ich will es bis bewegen, wenn ich nach unten scrollen. Damit bleibt jede Zeile in der gleichen Farbe.

Irgendwelche Vorschläge, wie mache ich das?

Quelle

2010-12-07 raf48

Können Sie bitte einige Markup hinzufügen, die Sie haben, diese Box. –

Meine Frage wurde beantwortet. Danke für deine Zeit – raf48

Keine Antwort auf Ihre Frage, aber wäre es nicht wünschenswert, jeder option stattdessen eine individuelle Hintergrundfarbe zu geben?

Primitive JSFiddle example

Der Ansatz Hintergrundbild gebunden ist, beispielsweise zum Scheitern verurteilt wenn der Benutzer die Schriftgröße erhöht.

Quelle

2010-12-07 23:39:10

Guter Gott! Sie haben Recht! Warum habe ich nicht schon früher daran gedacht ... – raf48

Ich bin mir nicht sicher, ob es auf select Elemente funktioniert, aber vielleicht:

option:nth-child(odd) { 
    Background-color: #ffa; 
}

Oder mit jQuery (für weniger gefällig/moderne Browser):

$('option:nth-child(odd)').css('background-color','#ffa');

ein Hintergrund- Verwendung Bild für die select Zebra-Striping zu simulieren ist unwahrscheinlich, dass zuverlässig über verschiedene Browser, Schriftgrößen, Plattformen zu arbeiten ...

Quelle

2010-12-07 23:41:21

Danke, ich werde es auf jeden Fall versuchen! – raf48

@ raf48: Denken Sie daran, dass der reine CSS-Ansatz möglicherweise nicht in allen Browsern zuverlässig ist (speziell IE <9 oder * vielleicht * 8, da bin ich mir nicht sicher). Die jQuery wird inline-Stile anwenden, funktioniert aber auch (obwohl Sie ['addClass()'] (http://api.jquery.com/addclass/) anstelle von 'css()' verwenden könnten, wenn Sie –

Warum nicht direkt TERGRU anwenden nd Farben für jede Reihe?

<option style="background-color: #FFF">...</option> 
<option style="background-color: #EEE">...</option>

Dies funktioniert gut (Verwendung CSS-Klassen anstelle des Stil-Attribut)

Quelle

2010-12-07 23:43:20 Dalmas

Vielleicht bekommt er das von einer DB. –

Ja, ich bekomme das von einer DB, und ich erzeuge den Code mit JS, also schreibe ich eine Funktion für die ungerade, gerade Option Hintergrundfarbe – raf48

Sie können erreichen, dass jQuerys ungerade oder gerade Selektoren.

Zum Beispiel, wenn Sie ein <ul> </ul>

<ul id="list"> 
    <li>Bla bla</li> 
    <li>Bla bla 2</li> 
    <li>Bla bla 3</li> 
    <li>Bla bla 4</li> 
    <li>Bla bla 5</li> 
</ul> 

$('#list li:odd').addClass('odd');

Dies wird eine class="odd" auf die li-Elemente wie folgt aus (2, 4, 6, 8, 10 usw.) in Dann können Sie die .odd Stil Klasse wie du willst.

Quelle

2010-12-07 23:44:25

Wählen Sie mehrere mit Hintergrundbild

Antwort

Verwandte Themen