Listenfeld Formatvorlage in einem bestimmten Element (option) HTML

Ich versuche, mich dieses Verhalten.

Wenn eine listBox (oder comboBox), meine ersten element (so etwas wie "wählen") sollte einen bestimmten Stil.

Mit dieser (test -) code:

<style type="text/css">
 .testX {font-style: italic;}
</style>

(...)

<select name="name" id="id">

<option class="testeX" selected="selected" value="#">
    <p class="testX">Choose One</p>
</option>
<option value="TestValue">
    TestValue
</option>

ich kann sehen, dass dieses Verhalten auf Firefox aber nicht in Chrome), wenn ich erweitere meine listBox, aber wenn ich wählen Sie 'Wählen' mein Feld hat nicht die (Kursiv) Stil.

Wie kann ich dies tun? Möglich ist dies nur mit HTML, CSS oder brauche ich mehr (wie jQuery)?

Dank.

InformationsquelleAutor JMarques | 2012-09-17

italic ist nicht anzuwenden, chrome und opera. plz-check http://www.electrictoolbox.com/style-select-optgroup-options-css/

können wir Ihnen jede design-Optionen.

<select name="name" id="id">
    <option style='font-style: italic; font-weight:bold;' selected="selected" value="#">
        <span>Choose One</span>
    </option>
    <optgroup label="Option group 1">
        <option value="TestValue">    TestValue</option>
        <option value="TestValue">    TestValue</option>
        <option value="TestValue">    TestValue</option>
    </optgroup>
</select>

css:

select option {
    background: none repeat scroll 0 0 #E5E3E3;
    border: 1px dotted #CCCCCC;
    height: 15px;
    line-height: 15px;
    text-indent: 3px;
    text-transform: capitalize;
    z-index: -9999; 
}
optgroup { /* Change font style and text alignment */
    font-style:italic;
    text-align:right;
}

InformationsquelleAutor Web Designer cum Promoter

2

Formular-Elemente sind notorisch schwierig zu Stil und viele sind fast unmöglich zu bekommen, konsistent in allen Browsern und Betriebssystemen. Mein Ansatz war immer, die verstecken das form-element mit javascript (in der Regel jQuery) und bauen etwas ähnliches mit divs und Spannweiten. So der Himmel ist die Grenze, wenn es um styling geht.

Müssen Sie sich selbst Fragen, ob es ist 100% notwendig, dass die verschiedenen Stil aber, abweichend vom standard form Elemente die nicht große Benutzerfreundlichkeit.

InformationsquelleAutor MassivePenguin
2

Als von HTML4, ein OPTION kann nur PCDATA enthalten, das ist einfach Charakter-Daten ohne Kind-Elemente. Die Charaktere analysiert werden (z.B. Personen).

http://www.w3.org/TR/html401/interact/forms.html#edef-OPTION

Als HTML5 -, nur text-Inhalte ist nicht erlaubt innerhalb einer OPTION.

http://dev.w3.org/html5/spec/the-option-element.html

In anderen Worten, verwenden Sie ungültige HTML, das ist kaum analysiert werden, die von jedem browser. In der Tat wusste ich nicht von einen einzigen browser, dass in der Lage ist die Darstellung von HTML-Elementen innerhalb eines OPTION-tag. (...bis ich gelesen habe, diese Frage...)

InformationsquelleAutor feeela
2

versuchen Sie es mit dem pseudo-element 'first-child'
```
 <style type="text/css">
       select#id option:first-child {font-style: italic;}
 </style>
```
- Und Absatz-tags gehören nicht innerhalb <option> tags, die Sie enthalten sollte Klartext.

Aber styling auf <option> - tags ist beschränkt, nicht alle Browser unterstützen es. Vielleicht haben Sie mehr Glück, die mit anderen Arten von styling -, wie hintergrund-Farben. Oder javascript verwenden und benutzerdefinierte HTML zu simulieren, die das gleiche Verhalten wie eine regelmäßige <select> box

Die kann ich verwenden? Es hat nicht funktioniert? Ich versuche diesen code: Option#testX option:first-child {font-style: italic;}
es ist kein select-element mit der ID 'testX', die Sie verwenden sollten, wählen Sie#id option:first-child (btw, ich habe aktualisiert mein Antwort, nicht alle unterstützt)

InformationsquelleAutor Reinder Wit
1

Als andere haben bereits darauf hingewiesen, dass der mark-up ist ungültig und erste native Formular-Steuerelemente konsistent in allen Browsern ist auf der Skala irgendwo zwischen sehr schwierig bis unmöglich.

Meiner Meinung nach sind Sie richtig in der Annahme, dass JavaScript-Lösung ist wahrscheinlich die am wenigsten Aufwand und die sicherste Methode, wenn Sie nicht dagegen, die Seite, Gewicht overhead, einschließlich einer oder mehrerer Bibliotheken und/oder plugins und sind zufrieden mit die non-JS-fallback der <select> weis nicht so Recht.

Der vielen <select> Ersatz jQuery-plugins zur Verfügung, empfehle ich die Select-2-plugin. Es hat eine reiche feature-set, die bereits unterstützt das hinzufügen Platzhalter text auf das Steuerelement, das Sie können Stil entsprechend.

InformationsquelleAutor andyb
1

Verwenden Sie dieses CSS -
```
select { font-style: italic;   }

select option  {
  font-style: normal;  
}

select option:first-child {
  font-style: italic;  
}
```
Beispiel jsFiddle

Aber leider wird dieser Stil angewendet wird, nur auf Firefox

Mit diesem code funktioniert es mehr oder weniger... es funktioniert, wenn ich erweitern mich listBox, aber wenn ich wählen Sie ein beliebiges element, das erscheinen in Kursiv (und ich will nur das erste element Kursiv). Können Sie mir helfen?
wenn Sie entfernen Sie einfach das erste css-Regel, die Sie den Effekt zu erhalten, aber Sie nicht sehen, den text Kursiv, bis Sie Sie öffnen, wählen Sie
option:first-child wird nicht unterstützt in chrome und opera

InformationsquelleAutor fcalderan
0

Nicht alle Browser unterstützen die HTML-tags innerhalb <option> tags.

er fragt-Lösung für das nicht ein Grund

InformationsquelleAutor keaukraine

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.