Formular/ Select ignoriert css

html.de-Forum HTML, XHTML & CSS
1

Hallo :=)

Mein Formular sieht gut aus bis auf meine Dropdownliste.

Kann mir jemand sagen warum sie nicht gleich wie das input aussieht? :frowning:

Danke schön im Voraus.

[CODE]
[SIZE=2]td, table{
font-family:verdana;
font-size:10px;
vertical-align:top;
line-height:12px;
color:#7F7F7F;

}

form { margin:0px; padding:0px}
body { margin:0px; padding:0px; background-color: #FFFFFF}
a { color:#E93400; text-decoration:none}
a:hover{ text-decoration:underline}
span a { color:#1569C7; text-decoration:underline}
span a:hover{ text-decoration:none}
.list ul{margin:0px; padding:0px; list-style:none; line-height:19px;}
.list ul li{ background:url(images/list_marker.gif) no-repeat left top; padding:0 0 0 12px}
.list ul li a{ color:#E93400; text-decoration:underline}
.list ul li a:hover{text-decoration:none}
.policy{ color:#7F7F7F}
.policy a{ color:#000000; text-decoration:none}
.policy a:hover{ text-decoration:underline}
span{ color:#000000}
strong a{ font-size:11px}
strong{ font-size:11px}
b{ color:#E93400}
.form input {
width:191px;
height:21px;
font-family:verdana;
font-size:9px;
color: #7F7F7F;
padding:2 0 0 6px;
border-color:#D5D5D5;
border-style:solid;
border-width:1px;
background-color:#F8F8F8
}
.form textarea {
width:191px;
height:102px;
font-family:verdana;
font-size:9px;
color:#7F7F7F;
overflow:hidden;
padding:2 0 0 6px;
border-color:#D5D5D5;
border-style:solid;
border-width:1px;
background-color:#F8F8F8
}
[/SIZE][/CODE]

[CODE]
[SIZE=2]

Kurs: Eintieg in die Informatik Internet Grundlagen IT-Sicherheit (Sicher im Internet) Effizient mit digitalen Fotos umgehen Windows XP / Vista Grundlagen Microsoft Office Grundlagen Microsoft Powerpoint Microsoft Excel Microsoft Outlook Microsoft Word PhotoPaint Corel Draw Einsteiger Windows Fortgeschrittene Homepage/Webdesign Datenbank-Programmierung (SQL) Programmieren (C++)
Firma:
Name:
Telefonnummer:
Email:



Adresse:
Bemerkung:
[/SIZE][/CODE]
2 
<select name="kurs" font-size: 12pt style="color:#7F7F7F" style="border-style:solid" style="border-width:1px;" size="1" onchange="doSubmit()">

font-size steht außerhalb von style.
Die anderen For-Elemente haben font-size:9px und eine background-color:#F8F8F8
css

.form select {
 color:#7F7F7F;
 font-size: 9px;
 border: 1px solid #7F7F7F;
 background-color:#F8F8F8;
}

html

<select name="kurs" size="1" onchange="doSubmit()">
3

Besten Dank!!!

Das war schnell!!

Alles super, bis auf der Rand :=(

Habe ich da eine Möglichkeit? Der Rand ist 3D :-?

4

In welchem Browser?

5

IE 6. Habe kein Firefox :frowning:

6

So sieht es im ff2.0 aus. Im Opera9.0 ähnlich.
http://css-spalten.red-rod.net/form/formff.png
Farben angepasst:

.form select { color:#7F7F7F; font-size: 9px; border: 1px solid #D5D5D5; background-color:#F8F8F8; } Für den IE6 habe ich keine gute wirklich gute Idee.
Den Submit-Button könntest du gegen eine Grafik austauschen.

<input name="Anmelden" src="button-grafik.png" class="anmelde_button" type="image"> Ich finde so schlecht sieht es im IE6 gar nicht aus.

In der Website-Gestaltung sollte man mindestens in diesen Browsern testen können:
-IE6

  • Mozilla (z.B. ff 2 oder ff 3)
    -IE7
    -Opera 9

Ich habe noch Safari3.1(win), IE5(win), ff2, ff3 und konqueror.
Andere Testen auch auf älteren Operas, ff1, IE5(mac) und diversen anderen.

In kürze muss man wohl auch unter IE8 testen können.

7

Hallo!!

Ok ich werde versuchen im Zukunft auf diese Browsern zu testen.

Doch was mich stört ist nicht das Resultat von IE 6 sonden von Firefox 3.

Dort sieht es so aus:

Weisst du wie ich das beheben kann?

8

Wie die Eingabefelder aussehen, ist nicht nur abhängig vom Browser, sondern auch vom Betriebssystem. Ist ja auch legitim, gibt es doch keine Vorschriften, welche CSS-Eigenschaften mit welchem Wert per default gesetzt sein müssen.

Wenn einem die Eingabefelder nicht gefallen - sie zu ändern hat den Nachteil, dass Nutzer sie möglicherweise nicht mehr als solche erkennen! - soll sie einfach umformatieren, natürlich mit CSS. Es gibt aber auch einige Teile von Feldern, die sich nicht ändern lassen. Ich hatte z.B. nie Probleme damit, den border eines Eingabefeldes (was bei mir überall außer in Vista mit „inset“ angegeben ist) zu ändern. Aber z.B. das Teil zum Draufklicken bei einem select, ist schon immer ein Element des Browsers gewesen und konnte nicht geändert werden, genauso wie der „Durchsuchen…“ Button bei Eingabefeldern von Typ file.

Von daher ist es wahrscheinlich die beste Lösung, Formularfelder so zu lassen, wie sie der Browser darstellet, am einfachsten und benutzerfreundlichsten.

Gruß,
-Efchen

9

ist aber auch eine Besonderheit.
Andere kann man, je nach Browser / System schon verändern.

Teilweise kann man das Formular damit sogar Nutzerfreundlicher gestalten.

10

für den kurzen Überblick reicht meiner Meinung nach auch sowas wie browsershots.org aus, dann sind auch gleich alle mit dabei.

11

Zur Not reicht das vielleicht auch.
Pseudoklassen, Sprungmenüs usw. kann man damit nicht unbedingt testen.
Und gerade da gibt es (im IE) viele Besonderheiten.