formular aufpeppen - speziell <select>

[glowi]

hey ich bastel grad für nen freund ne website und bin dabei ein kontaktformular zu entwerfen.
jetz hätt ich gerne die einzelnen formularelemente a bisserl mit css aufgepeppt.
elemente wie textarea und input hab ich auch hinbekommen.
was bei mir nicht geht (weiß net warum) ist der select -tag.

kann man das nicht via css formatieren, oder bin ich nur zu blöde dazu ( hoffe ich doch nicht )

vielleicht kann mir hier ja wer nen tipp geben

[jonemo]

mh, das geht eigentlich mit den gewöhnlichen mittelchen wie eben

font-family, border, padding, etc.

poste doch mal dein stylesheet (auszugsweise)

[glowi]

hier ma 'n auszug

...

INPUT {
    border : 1px solid Gray;
    background : White;
    font-size : 11px;
    font-family : sans-serif;
    }

Select {
    border : 1px solid Gray;
    background : White;
    font-size : 11px;
    font-family : sans-serif;
    }

INPUT.button {
    border : 1px solid Gray;
    background : #DCDCDC;
    font-size : 11px;
    font-family : sans-serif;
    color : Black;
    font-weight : bold;
}


TEXTAREA {
    border : 1px solid Gray;
    background : White;
    font-size : 11px;
}

... 

wie gesagt input, textarea und die input.klasse funktionieren einwandfrei, aber das mit select nicht (nur die schriftformate werden übernommen, das mit border und so net)

[Thomas]

hab' jetzt keinen code verglichen, schau mal einfach selbst, was Dr. Web zu diesem Thema sagt:

www.drweb.de/html/formulare_5.shtml
www.drweb.de/trickkiste/tricks57.shtml

gerade in Sachen Formulare & CSS ist Dr. Web eine sehr hilfreiche Fundgrube

[prefix]

abhilfe hier kann schaffen, wenn du den style direkt dem element zuweist, beispiel:

<form name="form1" method="post" action="">
<select name="select" style="color: red; background-color: black;">
<option value="wert1">bezeichnung</option>
<option value="wert2">bezeichnung</option>
</select>
</form>

eine weitere möglichkeit ist, im externen css NICHT direkt das element "select" zu definieren, sondern eine klasse dafür zu erstellen.

.select {
color: red;
background-color: black;
font-size: 0.9em;
}

dann im html-quelltext:

<select name="select" class="select">
<option value="wert1">bezeichnung</option>
<option value="wert2">bezeichnung</option>
</select>

mit diesen expirementen solltest du der lösung nahekommen :-)

[glowi]

jo, mit ner extra klasse gehts (nur das mit border geht net).
aber egal, muss ich dann halt evtl. anders lösen.

danke euch für eure bemühungen

[Nives]

gibt´s doch gar nicht, dass die browser die border-Angaben für select-Felder einfach ignorieren?!

Ich habe gerade das gleiche Problem und all die links hier unten und auch das selfhtml und andere schlaue Quellen konnten mir nicht weiterhelfen: das Thema wird totgeschwiegen oder die Tipps funktionieren nicht.

Hat denn hier noch niemand geschafft den Rahmen eines select-feld zu formatieren (es geht um den border!!!)? Oder habt ihr die Lösung gefunden, dann wäre es nett, wenn ihr sie hier mal posten könntet!

Viele Grüße,
Nives

[Flow09]

@Nives: Da wirst Du es schwer haben! Den border vom <select> kann man leider nicht ändern (zumindest hab ich noch nix dazu gefunden, und ich hab lang gesucht)!
Hab hier das gleiche Problem gehabt! Damit muss man sich leider abfinden!

lg
Flow

[fniffi]

Hi Leutz,
also direkte Systemelemente lassen sich nicht mit CSS einrichten.
dazu gehört select und input type=file z.B. bei uploads notwendig.
Du kannst aber die Option verändern
option{font-size:11px;border:1px ridge #336699;background-color:#99CC99;}

option:focus{font-size:11px;border:1px ridge #339999;} kannst Du auch mal probieren, geht auf jeden Fall mit Netscape 7
option:hover{background-color:#CCCC99;}

versuchs mal damit und meld Dich wieder, dann schau wir mal ;-)