zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden input [type=checkbox] - borderless ? wie geht?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 17.04.2007, 16:59
Benutzerbild von Krischu
"Validier erst mal"-Sager
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.08.2006
Beiträge: 317
Krischu befindet sich auf einem aufstrebenden Ast
Standard input [type=checkbox] - borderless ? wie geht?

Ich habe ein Formular mit <input type="text">. Das Formular hat einen hellblauen Hintergrund und mehr oder weniger durch Zufall, weil mein initiales
Code:
* {margin: 0; padding: 0; border: 0;}
bis dorthinein durchgriff, dachte ich:"Hey, das sieht ja gar nicht so schlecht aus, laß' uns das doch mal so übernehmen".

Aber, igitt, wie sieht denn diese Checkbox aus, oder dieser Radiobutton?
Hat ja diesen schattierten Rand wie aus XMosaic-Zeiten.

Mit welchem style-element kann ich denn das Aussehen dieser Elemente beeinflussen?
__________________
--
Viele Grüße
Christoph
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 17.04.2007, 17:42
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Gar nicht. Lass die Inputs in Ruhe. Dies wird langsam zu einer FAQ hier.

z.B. Firefox: programmordner/res/forms.css
suche nach input[type="checkbox"]

Dies sind die Browser-defaults, ein Author-Stylesheet. Sieh, wieviele Eigenschaften mit !important versehen sind. Das bedeutet, dass nur ein Nutzer-Stylesheet diese überschreiben kann. Aber kein weiteres Author-Stylesheet.

Lesen:
Styling form controls with CSS, revisited

und dazu die Spezifikation, UA Conformance
Zitat:
CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.
Fazit:
Ein Komplett-Reset
Code:
* {margin:0; padding:0; }
ist Unfug, wenn man mit Forms arbeitet auf einer Seite, da man nicht wissen kann, welche Browser auf welche Werte zurückgesetzt werden müssen/können. Man sollte Elemente immer bewusst zurücksetzten.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (17.04.2007 um 17:51 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.04.2007, 23:23
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.223
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Zitat:
Zitat von IChao Beitrag anzeigen
Ein Komplett-Reset
Code:
* {margin:0; padding:0; }
ist Unfug, wenn man mit Forms arbeitet auf einer Seite ... Man sollte Elemente immer bewusst zurücksetzten.
Danke für den Denkanstoß. Weitergedacht würde das bedeuten, dass der "CSS-Prolog" zumindest für solche Stylesheets abzulehnen ist, die sich auf Seiten auswirken, die Steuerelemente beinhalten - also fast alle?

Der häufig zu lesende Rat "Setz mal den Prolog" hätte sich ja dann auch überholt. Wäre Eric Meyers "CSS-Reset" die bessere Alternative?
Mit Zitat antworten
  #4 (permalink)  
Alt 18.04.2007, 23:50
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Da ich selten Seiten schreibe, wäre das mal eine Frage in die Runde derjenigen, die viel mit Forms arbeiten:

Richtet ein universeller Reset von margin und padding auf 0 etwas Böses an, vergleicht man Safari, Opera, Firefox und IE?

Ein differenzierter Reset wie der von Meyer scheint mir auf dem ersten Blick großkalibrig, meine Seiten erscheinen mir zu klein dafür. Vielleicht erleichtert es Teams von CSS-Codern die notwendige Vereinheitlichung. Er verhindert im Ergebnis vielleicht auch bei Anfängern einige Fragen nach der verschiedenen Darstellung. Ich denke im Übrigen, dass eigentlich nur die Elemente body, html, ul und li Probleme machen mit ihren Standardvorgaben. Ich will zum Beispiel bei einer h2 sowieso margin und padding bewusst setzen, wozu vorher also erst auf Null?
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
  #5 (permalink)  
Alt 19.04.2007, 11:36
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.789
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Ist schon eine Weile her, dass ich mich mit einem "CSS-Prolog" befasst habe. Ich habe einiges gelesen, viel ausprobiert und bin (wieder) beim globalen Zurücksetzen der Randabstände (nicht der Rahmen) gelandet.
Auch bei umfangreichen Formularseiten bin ich browserübergreifend mit dieser Vorgehensweise zurechtgekommen.

Zitat:
Ich will zum Beispiel bei einer h2 sowieso margin und padding bewusst setzen, wozu vorher also erst auf Null?
Ein globales Nullen "zwingt" den Autor, wirklich jeden Randabstand bewusst zu setzen. Ich persönlich brauche das, damit ich nichts vergesse...
Mit Zitat antworten
  #6 (permalink)  
Alt 19.04.2007, 15:03
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.869
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Schließe mich an - ich sehe kein Problem im Nullen mit anschließender Neudefinition von padding bei Formularelementen, im Falle von margin eh nicht (und ich teste wirklich jede meiner Seiten ausgiebig im IE ab 5.0 und Opera & Netscape jeweils ab 7.0). Im Falle von border sähe es natürlich anders aus, aber um die ging es ja auch nicht.

Ohne globales Nullen würde es mich total nerven, jedem Element immer wieder padding: 0; und margin: 0; zuzuweisen, oder alternativ am Anfang des CSS statt des Universalselektors alle Elemente der Website (aber ausgenommen eben die Formularelemente) aufzuzählen und dabei keines zu vergessen...

Und zu dem Beispiel mit margin und padding bei h2: Ich persönlich setze für Überschriften fast nie padding (ein globales line-height: 1.5; macht dies fast immer überflüssig), und margin allenfalls top und/oder bottom, manchmal aber auch keines von beiden (je nach Kontext bzw. "Position" im Fließtext).
Mit Zitat antworten
  #7 (permalink)  
Alt 19.04.2007, 15:23
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Ist dann eurer Meinung nach das Reset Reasoning auf meyerweb eher akademisch?

Auch auf cssd wird hin- und her diskutiert, welcher Weg nun besser ist. Einige schlagen vor, immer nur das Benötigte zurückzusetzen, andere wiederum wollen ein universelles Reset.

Es bleibt wohl eine private Entscheidung, und ich ziehe besser mein Urteil "Unfug" zurück und behaupte das Gegenteil (gufnu).
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken

Geändert von IChao (19.04.2007 um 15:27 Uhr)
Mit Zitat antworten
  #8 (permalink)  
Alt 19.04.2007, 15:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.789
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Es gibt Für und Wider zu jeder Vorgehensweise. Ich finde diese Diskussionen und Meinungen wichtig ("akademisch" klingt so nach nutzlos?), um einen eigenen Weg zu finden.

Entscheidend ist IMHO, dass man sich der Tatsache bewusst ist, *dass* die Browser eigene Vorschläge für Abstände (u.a.) mitbringen.
Um einen Einsteiger nicht in einer seitenlangen Erläuterung zu diesem Thema zu verwirren, finde ich den knappen "CSS-Prolog" der FAQ angemessen.
Mit Zitat antworten
  #9 (permalink)  
Alt 16.05.2007, 08:43
#
XHTMLforum-Kenner
 
Registriert seit: 30.06.2005
Ort: Hamburg
Beiträge: 2.092
IChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer MenschIChao ist ein sehr geschätzer Mensch
Standard

Formal Weirdness führt den Gedankengang weiter aus, warum ein * {padding:0} zu Problemen führen kann.
__________________
Ingo Chao

Buch: Fortgeschrittene CSS-Techniken
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Input Radio Cybertronic (X)HTML 5 15.03.2010 23:35
Kein line-height auf input in Firefox 3? o.dey CSS 4 09.01.2009 14:57
input type submit formatieren dieter99 CSS 9 10.10.2008 16:39
Probleme mit Input Feldern Thorin CSS 4 06.06.2006 16:15
Input Type hidden eigenen Style definieren. Wie? dabjoern CSS 4 09.07.2005 10:51


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:34 Uhr.