Select Option Width durch CSS Verändern

JuniorReid · 26.04.2011

Hallo und einen schönen guten Abend,

nach mehreren Stunden der Suche bin ich immernoch nicht fündig geworden. Ich suche nach einem Befehl per CSS oder JavaScript, der die Breite der Option des Select verändert.
Beispiel (bitte ohne Bildchen denken):

( Gemeint ist das markierte E-Mail Feld - die Breite dieses Feldes per CSS verändern.)
Leider fand ich nur große Scripte mit jQuery, dachte mir jedoch, dass es das nicht gewesen sein kann (10 Scripte für einen Befehl).
Vielleicht weiss der Eine oder Andere da einen Anhaltspunkt!?

Liebe Grüße

sokie · 27.04.2011

AW: Select Option Width durch CSS Verändern

die option felder sind eingangs immer so breit wie das umgebende select es vorgibt.
option lässt sich natürlich per css in der Breite stylen per width:
wenn du ein spezielles optionfeld mit einer css regel belegen willst, könntest du diesem Element eine id oder eine klasse geben (inhaltsselektoren wären auch denkbar, werden aber von vielen Browsern (IE!) nicht unterstützt).
konkret kann das zB so aussehen;

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<style type="text/css">
select{
    width: 200px;
}
#mail{
    width: 70px;
    background: #ffff00;
}
</style>
<title></title>
</head>
<body>
<form>
  <select id="select1" name="select">
    <option>Option 1</option>
    <option id="mail">mail</option>
    <option>fon</option>
    <option>lange Option</option>
    <option>Option X</option>
  </select>
</form>
</body>
</html>

übrigens schränkt es die Benutzerfreundlichkeit ein, wenn die optionsfelder unterschiedliche breiten haben (deshalb nicht empfohlen das zu machen)

JuniorReid · 27.04.2011

AW: Select Option Width durch CSS Verändern

Danke für deine Antwort. Leider habe ich mich nicht klar genug ausgedrückt. Um zu verstehen, was ich meine hier ein nichtfunktionierender Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<style type="text/css">
#select1{
    width: 200px;
}
#select1 option{
    width: 210px;
    background: #ffff00;
}
</style>
<title></title>
</head>
<body>
<form>
  <select id="select1">
    <option>Option 1</option>
    <option>mail</option>
    <option>fon</option>
    <option>lange Option</option>
    <option>Option X</option>
  </select>
</form>
</body>
</html>

Die Breite der Option die zu sehen ist, ohne darauf zu klicken sollte kleiner sein, als die Option wenn man darauf klickt.

Liebe Grüße

MegaAdi · 27.04.2011

AW: Select Option Width durch CSS Verändern

Wenn du möchtest dass sich beim onClick die CSS-Klasse ändert deklarier jeweils eine CSS-Klasse für den "Normalzustand" und eine für "onClick".

dann deklarierst du für dein Option-Feld: <option onClick="this.className='draufklicken';">ABC</option> Und schon ändert sich das aussehen.

Ich hoffe das ist das, was du meinst.

Gruß Adrian

fakerer · 27.04.2011

AW: Select Option Width durch CSS Verändern

lass mal das css für die option weg. Dann ist das doch zu beginn immer so breit wie das select wie sokie schon sagt und wenn man es aktiviert ist es doch automatisch immer so breit wie der breiteste Text also unten oder nicht?
Zumindest in den neuen Browsern ich glaub alle <= IE8 macht das nicht so.

Bin mir aber auch nicht ganz sicher ob ichs richtig verstanden habe. Zumindest glaub das du was meinst wozu dein Bild überhaupt nicht passt

.

JuniorReid · 27.04.2011

AW: Select Option Width durch CSS Verändern

Das hatte ich auch versuchst, leider hat´s bei mir nicht funktioniert, aber das liegt dann wohl eher an meinem Befehl. Wie ist denn der onclick Befehl um die Breite zu verändern, also onclick Option-Width z.B. 210px?

Liebe Grüße

MegaAdi · 27.04.2011

AW: Select Option Width durch CSS Verändern

onClick="this.style.width='70px';"
Versuch doch auch mal Tante G zu bemühen

Gruß Adrian

JuniorReid · 27.04.2011

AW: Select Option Width durch CSS Verändern

Salve Adrian,

dein Code vergrößert oder verkleinert die Select ansich, doch das ist nicht der Sinn und Zweck dessen, was ich suche.
Ein Screenshot meiner Suche:

Die Option ist größer als Select! Ich denke an diesem Bild sollte es klar zu erkennen sein!
Anbei noch eine Frage; Wie ist es möglich per CSS den Pfeil nach unten zu verändern? (Siehe Bild)

Liebe Grüße