Formularfelder

[karinsch]

Hallo!

Ich möchte meine Formularfelder über css stylen. Dazu hab ich in der css angegeben:

input {
background-color:#F6EDD4;
border:1px #A20B0B solid;
font-family:Arial, Helvetica, sans-serif;
}

Jetzt werden mir alle input-Felder dementsprechend gestylt. Leider auch die checkboxen...
Ich möchte aber für die checkboxen ein eigenes Styling festlegen, das krieg ich aber nicht hin, auch wenn ich in der css schreibe:

.checkbox {
border:0px;
background-color:#FBF2CE;
margin:0px;
}

Und dann in der checkbox:
<input type="checkbox" name="check1" value="test" class="checkbox">

Es macht mir immer das styling vom input.

Wie krieg ich das hin?
Direkt in die checkbox möcht ich kein styling reinschreiben, da es ziemlich viele sind...

Vielen Dank im Voraus!
Liebe Grüße,
Karin!

[Ole]

hi

in welcher reihenfolge stehen die definitionen für deine inputs und die checkboxen?

so long
Ole
(8-)>

[MudGuard]

Hi,

in welcher reihenfolge stehen die definitionen für deine inputs und die checkboxen?

Das sollte aufgrund der unterschiedlichen Specificity der Selektoren keine Rolle spielen.

cu,
Andreas

[Ole]

hi

Das sollte aufgrund der unterschiedlichen Specificity der Selektoren keine Rolle spielen.

wenn die input definition nach der klassen-definition gemacht wird, so wird imho die border-definition überschrieben, weil erst auf die classe angewendet wird und dann auf alle inputs. oder missverstehe ich da etwas?

so long
Ole
(8-)>

[MudGuard]

Hi,

Das sollte aufgrund der unterschiedlichen Specificity der Selektoren keine Rolle spielen.
wenn die input definition nach der klassen-definition gemacht wird, so wird imho die border-definition überschrieben, weil erst auf die classe angewendet wird und dann auf alle inputs. oder missverstehe ich da etwas?

Die höhere Specificity müßte sich durchsetzen.
Überschrieben werden darf nur bei gleicher Specificity.

.checkbox hat eine höhere specificity als input

cu,
Andreas

[Ole]

hi

Die höhere Specificity müßte sich durchsetzen.
Überschrieben werden darf nur bei gleicher Specificity.

"Müßte" ist eine schöne Formulierung :)
Selbst mein FF (mitlerweile auf 1.04) macht mir da Probleme.

Hab mir deshalb angewöhnt, erst die Element-, dann die Klasse- und dann die ID-Definitionen zu schreiben.

so long
Ole
(8-)>

[MudGuard]

Hi,

"Müßte" ist eine schöne Formulierung :)

Habs grad nochmal ausprobiert: klappt in Firefox und Opera und sogar im IE ohne Probleme.
siehe https://forum.selfhtml.org/?t=108377&m=674763

cu,
Andreas

[karinsch]

Hm, dann weiss ich auch nicht, jedenfalls funktionierts jetzt....

danke, lg Karin!

[MudGuard]

Hi,

Hm, dann weiss ich auch nicht, jedenfalls funktionierts jetzt....

Ich vermute eher ein Cache-Problem - Dein Browser hatte eine alte Version im Cache.

Mit diesem CSS:
.test { color:red; }
p { color:blue; }
input { color:green; }

und diesem HTML
<p class="test">bla</p>
<input type="text" value="blubb" class="test">

wird bla und blubb in rot dargestellt.

cu,
Andreas

[karinsch]

Es funktioniert jetzt!

War die falsche Reihenfolge!

Vielen Dank!
Liebe Grüße,
Karin!

[MudGuard]

Hi,

Es funktioniert jetzt!

War die falsche Reihenfolge!

Welcher Browser ist derart kaputt?

cu,
Andreas

[MudGuard]

Hi,

input {
background-color:#F6EDD4;
border:1px #A20B0B solid;
font-family:Arial, Helvetica, sans-serif;
}
.checkbox {
border:0px;
background-color:#FBF2CE;
margin:0px;
}
<input type="checkbox" name="check1" value="test" class="checkbox">

Es macht mir immer das styling vom input.
Direkt in die checkbox möcht ich kein styling reinschreiben, da es ziemlich viele sind...

Funktioniert es denn, wenn Du es mal testweise in einer Checkbox per style-Attribut probierst?

Gerade bei Checkboxen machen die Browser nicht allzu viel mit, was die CSS-Formatierung angeht.

cu,
Andreas

[flashnfantasy]

Habe auch ein unterschiedliches Verhalten der Browser auf die Checkbox, soweit ich mich erinnere wirken eine Reihen von CSS-Attributen bei Checkboxen einfach nicht.