getrennte layouts für input boxen

[Promaetheus]

ich habe bei meinem stylesheet eine allgemeine definition der formularelemente. leider wird mir jetzt auch bei allen checkboxen ein roter rand RUND UM die checkbox angezeigt?!

 input, textarea, select, option {
	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size : 10px;
	font-weight : normal;
	color : #0000ff;
	BORDER-LEFT: 1px solid #000000;
	BORDER-RIGHT: 1px solid #000000;
	BORDER-TOP: 1px solid #000000;
	BORDER-BOTTOM: 1px solid #000000;
	background-Color: #ff0000;
}

wo hab ich denn da meinen denkfehler? wo kommt der rote rand her, bzw. wie kann ich den wegbekommen?

[DiBo33]

wo hab ich denn da meinen denkfehler?

Du vergisst das Checkboxen (sowie Radio und buttons) auch Inputfelder sind.

Erstelle eine Klasse und weise dieser den Checkboxen zu.

[Promaetheus]

danke erstmal für den tipp.
leider funktioniert das aber IM INTERNET EXPLORER nicht. ich habe 4 verschiedene boxen:
1 - allgemeine formularfelderdefinition <- funktioniert
2 - inputfield OHNE rahmen <- funktioniert
3 - inputfield und textarea bei error rot umrandet: <- funktioniert
4 - checkbox field OHNE rahmen und farbe <- FUNKTIONIERT LEIDER NICHT.

firefox: alles top (das war aber auch schon ohne die extra class so)
internet explorer: die checkbox hat zwar keinen rahmen mehr ist aber noch umrandet mit einer farbe.

siehe auch: http://aurea.cc/catalog/shopping_car...5d5ca7d4804107

 input, textarea, select, option {
	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size : 10px;
	font-weight : normal;
	color : #000000;
	BORDER-LEFT: 1px solid #000000;
	BORDER-RIGHT: 1px solid #000000;
	BORDER-TOP: 1px solid #000000;
	BORDER-BOTTOM: 1px solid #000000;
	background-Color: #ffffff;
}

input.borderless {
    border-style: none;
}

input.error, textarea.error {
	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size : 10px;
	font-weight : normal;
	color : #000000;
	BORDER-LEFT: 2px solid #ff0000;
	BORDER-RIGHT: 2px solid #ff0000;
	BORDER-TOP: 2px solid #ff0000;
	BORDER-BOTTOM: 2px solid #ff0000;
	background-Color: #ffffff;
}

input.checkbox_borderless {
	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size : 10px;
	font-weight : normal;
   border-style: none;
}

[Zergling-new]

Ich definiere per whitelist, nicht wie du per blacklist.

textarea, button, input.text, option {
// schriftstil
}

textarea, input.text {
// eingabefelder
}

button, input.submit, input.button, input.reset {
// buttons
}

// rest rafft eh keine Formatierung gescheit

[DiBo33]

Ausserdem solltest du wissen, dass Formatierungen von Checkboxen, Radiobutton usw. sich in jedem Browser total unterscheiden.

Leider gibt es scheinbar den Artikel bei css4you nicht mehr, in dem es anschaulich dargestellt wurde.

[Promaetheus]

hm... schade. habs jetzt zwar hinbekommen. aber wohl mehr aus zufall. ;o)

danke auf jeden fall für eure tipps. ;o)

[Zergling-new]

Und wie?

[Promaetheus]

ich habe eine extra class für checkboxen angelegt und einfach die standard hintergrundfarbe eingegeben. auch habe ich eine separate class für die dropdownfelder angelegt.

hintergrund: ich brauchte 3 verschiedene layouts für inputboxen:
1-inputbox für login ohne rahmen
2-inputbox standard mit schwarzem rahmen
3-bei eingabefehler leuchtet die inputbox jetzt mit rotem rahmen auf.

problem hierbei wiedermal der internetexplorer: ich habe eine extra class machen müssen für die dropdownboxen, welche einen roten hintergrund haben sollten, denn der internetexplorer macht nur einen dünnen roten rand um die dropdownbox, welchen man fast nicht sieht. man muss die class dann beim <select> UND beim <option>bitte auswählen</option> eingeben, sonst hat das feld keinen roten hintergrund. ;o)

und so sieht das ganze jetzt aus:

 input, textarea, select, option {
	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size : 12px;
	font-weight : normal;
	color : #000000;
	BORDER-LEFT: 1px solid #000000;
	BORDER-RIGHT: 1px solid #000000;
	BORDER-TOP: 1px solid #000000;
	BORDER-BOTTOM: 1px solid #000000;
	background-Color: #ffffff;
}

input.borderless {
  border-style: none;
}

input.error, textarea.error {
	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size : 12px;
	font-weight : normal;
	color : #000000;
	BORDER-LEFT: 2px solid #ff0000;
	BORDER-RIGHT: 2px solid #ff0000;
	BORDER-TOP: 2px solid #ff0000;
	BORDER-BOTTOM: 2px solid #ff0000;
	background-Color: #ffffff;
}

select.error, option.error {
	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size : 12px;
	font-weight : normal;
	color : 000000;
	BORDER-LEFT: 0px solid #ff0000;
	BORDER-RIGHT: 0px solid #ff0000;
	BORDER-TOP: 0px solid #ff0000;
	BORDER-BOTTOM: 0px solid #ff0000;
	background-color: ff0000;
}

input.checkbox_borderless {
	font-family : Arial, Verdana, Geneva, Helvetica, sans-serif;
	font-size : 12px;
	font-weight : normal;
      border-style: none;
	background-Color: #EBEBEB;
}