getrennte layouts für input boxen

Promaetheus · 28.11.2005, 11:58

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?!

Code:

 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 · 28.11.2005, 13:29

Zitat:

Zitat von Promaetheus

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 · 28.11.2005, 16:55

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

Code:

 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 · 28.11.2005, 17:37

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 · 28.11.2005, 18:12

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 · 29.11.2005, 15:52

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

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

Zergling-new · 29.11.2005, 16:17

Und wie?

Promaetheus · 30.11.2005, 07:39

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:

Code:

 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;
}

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
input type="file" mit css formatieren	rooomka	HTML, Usability und Barrierefreiheit	10	25.03.2009 22:05
input type text standart angewaehlt		HTML, Usability und Barrierefreiheit	4	19.02.2009 00:54
2 Boxen nebeneinander, restliche Text unter den Boxen.	PsychoEagle	HTML, Usability und Barrierefreiheit	2	29.03.2007 11:57
INPUT RADIO mit INPUT TEXT kombinieren!?!	buggybugga	HTML, Usability und Barrierefreiheit	5	20.02.2007 17:33
Width Problem bei input und text Feld	suter	HTML, Usability und Barrierefreiheit	2	14.02.2007 14:03
Cursorfokus automatisch in ein Input Feld setzen	DDogg	HTML, Usability und Barrierefreiheit	5	17.05.2006 22:48
Multiarray mit input!	Tschuu	PHP-Fortgeschrittene	1	07.01.2006 15:43
css - 3 boxen nebereinander	seejay	HTML, Usability und Barrierefreiheit	3	08.08.2005 16:54
[Erledigt] Input value und Input text		PHP Tipps 2005-2	4	12.07.2005 16:46
Eintrag in ein Input aus einem Popup Fenster veranlassen	Plague	HTML, Usability und Barrierefreiheit	0	08.06.2005 18:23
[CSS] input & checkboxen trennen	Igäl	HTML, Usability und Barrierefreiheit	9	11.05.2005 18:52
input durch klick einfügen		PHP Tipps 2005	2	02.05.2005 16:20
[Erledigt] input type's		HTML, Usability und Barrierefreiheit	4	27.03.2005 18:23
CSS boxen lappen übereinander und passen sich nicht an!!!!!!	'progman'	HTML, Usability und Barrierefreiheit	1	20.10.2004 23:47
ausklappbare boxen	Creativ	PHP Tipps 2004	4	04.06.2004 15:18

28.11.2005, 11:58
Promaetheus Erfahrener Benutzer Registriert seit: 07.11.2003 Beiträge: 526	getrennte layouts für input boxen 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?! Code: 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? __________________ mfg Alexander Haim


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

28.11.2005, 17:37
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	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

28.11.2005, 18:12
DiBo33 Erfahrener Benutzer Registriert seit: 05.07.2004 Beiträge: 1.476	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.

29.11.2005, 15:52
Promaetheus Erfahrener Benutzer Registriert seit: 07.11.2003 Beiträge: 526	hm... schade. habs jetzt zwar hinbekommen. aber wohl mehr aus zufall. ;o) danke auf jeden fall für eure tipps. ;o) __________________ mfg Alexander Haim

29.11.2005, 16:17
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	Und wie?