Nur input.text mit CSS formatieren.
Lugi
- css
Hallo erstmal!
Ich habe ein Problem, das mich seit gestern abend quält!
Und zwar will ich nur für die Eingabefelder (input.text) css definieren.
Aber das haut irgendwie nicht hin.
Test-Code.................
<html>
<head>
<style type="text/css">
input.text {
font-family:Verdana,Arial,sans-serif;
font-size:10pt;
font-weight:normal;
color:#373333;
background-color:#F3F3F3;
border:1 solid #0B50DD;
}
</style>
<title>Test</title>
</head>
<body>
<form>
<input type="text"><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="button" value="TEST"><br>
<input type="submit" value="TEST2"><br>
</form>
</body>
</html>
Test-Code-Ende.............
Ich denke mal nicht, daß da was falsch ist?!?
Als Browser habe ich den IE6.0 und Opera 6.05 benutzt, beide schaffen es nicht!
NS 4.x kann es sowieso nicht......
Wenn ich das ".text" weglasse, dann funktioniert es, aber dann haben die Radiobuttons
und die Checkboxen auch einen Rahmen und einen Hintergrund und das will ich nicht!
Schon mal danke an alle die mir helfen!!!
Gruß,
Lugi.
Hallo Lugi,
"type" ist nicht "class", ich hab mir mit Anlegen von Klassen geholfen, also
<input type="text" class="obligtext">
und dann
.obligtext {diverse Angaben}
Ist ggf. nervig, überall Klassen anzugeben, aber wenn es dann noch unterschiedliche Textfelder gibt, ist es wieder sehr nützlich.
Vielleicht gibt es noch eine elegantere Lösung? Wprde mich auch interessieren.
Schöne Grüße aus Köln-Ehrenfeld,
Elya
Hallo!
Ja, gut, das mit den Klassen ist mir bekannt und verwende ich auch.
Da ich ein mittelgroßes Projekt habe und mir nun dachte, ich könnte die
Eingabefelder ein wenig mit CSS verschönern, wäre es doch einfacher dies
gleich in meine style.css einzubauen.
Funktioniert es denn bei anderen Browsern (IE5 oder IE5.5) mit input.text oder
muß ich grundsätzlich mit Klassen arbeiten, wenn ich einzelne Typen
von Formularen formatieren will???
Hallo!
Ja, gut, das mit den Klassen ist mir bekannt und verwende ich auch.
Da ich ein mittelgroßes Projekt habe und mir nun dachte, ich könnte die
Eingabefelder ein wenig mit CSS verschönern, wäre es doch einfacher dies
gleich in meine style.css einzubauen.
Mach das doch. Es gibt einfach ein paar grundlegende Regeln zu wissen, dann ist das stylen cool und spart einen ainen Haufen Arbeit.
Funktioniert es denn bei anderen Browsern (IE5 oder IE5.5) mit input.text oder
muß ich grundsätzlich mit Klassen arbeiten, wenn ich einzelne Typen
von Formularen formatieren will???
Also...
Wenn im CSS nur der Tagneme steht und dahinter die Styles eingebunden werden, z.Beispiel...
INPUT {color:#FF0000;}
dann werden "ALLE" INPUT Tags die man benutzt einen roten Text aufweisen.
Hat man aber einige INPUT Tags, die anderst sein müssen, erstellt man eine Klasse die NUR für diese Art der Felder steht. So hat man dann schon zwei Styles.
Beispiel:
INPUT {color:#FF0000;}
INPUT.nameField {color:#000000; font-weight:bold;}
Dann muss man in diesem Beispiel (Adressformular) den Namen schwarz haben und die restlichen einträge rot. Das sieht dan so aus:
...
<INPUT type="text" name="vorname" class="nameField", size.........>
<INPUT type="text" name="plz" size="6"> usw.
Würde man aber beim 2 Style (INPUT.nameFields) den color Style weglöassen und nur font:bold reintun, würde ein Tag INPUT, das die Klasse nameField hat, die Schrift rot und Bold machen. Die CSS Klassen erben Styles vom gleichen tagtyp, sofern das nicht explizit in der Klasse geändert wird.
Hoffe, es hat ein wenig geholfen.
Schönes Weekend
Joel
Hi,
input.text {
das formatiert input-Elemente, die ein class-Attribut mit Wert text haben.
Du willst ein input-Element formatieren, daß ein type-Attribut mit Wert text hat.
Also
input[type='text']
(das class-Attribut hat eine Sonderstellung, es kann sowohl über input[class='bla'] als auch über input.bla selektiert werden - ähnlich wie id, das über [id='bla'] oder #bla selektiert werden kann)
Ach so, kleiner Nachteil bei den [attribute='value'] Selektoren:
Der Internet Explorer ist zu dumm dazu.
font-family:Verdana,Arial,sans-serif;
font-size:10pt;
pt und Bildschirmanzeige beißt sich, siehe Archiv...
font-weight:normal;
color:#373333;
background-color:#F3F3F3;
border:1 solid #0B50DD;
Die Border-Width hat einen ungültigen Wert, damit hat border einen ungültigen Wert - ein korrekter Browser wird also die border-Eigenschaft ignorieren.
Ich denke mal nicht, daß da was falsch ist?!?
Doch, einiges, siehe oben.
Als Browser habe ich den IE6.0 und Opera 6.05 benutzt, beide schaffen es nicht!
Doch, sie halten sich an das, was vorgegeben ist...
Wenn ich das ".text" weglasse, dann funktioniert es, aber dann haben die Radiobuttons
und die Checkboxen auch einen Rahmen und einen Hintergrund und das will ich nicht!
Dann ist der Browser defekt - ein Rahmen dürfte nicht vorhanden sein, s.o.
cu,
Andreas