Dies ist eine häufige Sorge.
Der Standard Skizze die von Browsern wiedergegeben werden, sind hässlich.
Siehe zum Beispiel dies:
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<form>
<label>Click to see the input below to see the outline</label>
<input type="text" placeholder="placeholder text" />
</form>
Die häufigste "Lösung", die die meisten empfehlen, ist outline:none - was bei falscher Anwendung eine Katastrophe für die Zugänglichkeit ist.
Wozu ist die Gliederung überhaupt gut?
Es gibt eine sehr trocken gestaltete Website die ich gefunden habe und die alles gut erklärt.
Es bietet visuelles Feedback für Links, die den "Fokus" haben, wenn Navigation in einem Webdokument mit der TAB-Taste (oder einer gleichwertigen Taste). Dies ist besonders nützlich für Leute, die keine Maus benutzen können oder eine Sehschwäche haben. Beeinträchtigung haben. Wenn Sie die Gliederung entfernen, machen Sie Ihre Website für diese Menschen unzugänglich.
Ok, probieren wir es aus, gleiches Beispiel wie oben, jetzt verwenden wir die TAB Taste zu navigieren.
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
</form>
Haben Sie bemerkt, dass Sie erkennen können, wo der Fokus liegt, auch ohne auf die Eingabe zu klicken?
Versuchen wir nun outline:none auf unserem zuverlässigen <input>
Verwenden Sie also auch hier die TAB Taste, um nach dem Anklicken des Textes zu navigieren und zu sehen, was passiert.
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none;
}
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
</form>
Sehen Sie, wie schwierig es ist, herauszufinden, wo der Schwerpunkt liegt? Das einzige Anzeichen dafür ist das Blinken des Cursors. Mein obiges Beispiel ist zu stark vereinfacht. In der Praxis würden Sie nicht nur ein einziges Element auf der Seite haben. Eher etwas in der Art wie hier.
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none;
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
Vergleichen Sie dies nun mit der gleichen Vorlage, wenn wir die Gliederung beibehalten:
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
Wir haben also Folgendes festgestellt
- Umrisse sind hässlich
- Ihre Beseitigung macht das Leben schwieriger.
Wie lautet also die Antwort?
Entfernen Sie den hässlichen Umriss und fügen Sie Ihre eigenen visuellen Hinweise hinzu, um den Fokus anzuzeigen.
Hier ist ein sehr einfaches Beispiel für das, was ich meine.
Ich entferne den Umriss und füge einen unteren Rand an :focus y :aktiv . Ich entferne auch die Standardränder an der oberen, linken und rechten Seite, indem ich sie auf transparent einstelle :focus y :aktiv (persönliche Vorliebe)
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none
}
input:focus,
input:active {
border-color: transparent;
border-bottom: 2px solid red
}
<form>
<label>Click to see the input below to see the outline</label>
<input type="text" placeholder="placeholder text" />
</form>
Versuchen wir also den obigen Ansatz mit unserem "realen" Beispiel von vorhin:
.wrapper {
width: 500px;
max-width: 100%;
margin: 0 auto;
}
form,
label {
margin: 1em auto;
}
label {
display: block;
}
input {
outline: none
}
input:focus,
input:active {
border-color: transparent;
border-bottom: 2px solid red
}
<div class="wrapper">
<form>
<label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
<input type="text" placeholder="placeholder text" />
</form>
<form>
First name:<br>
<input type="text" name="firstname"><br> Last name:<br>
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
<form>
<label for="GET-name">Name:</label>
<input id="GET-name" type="text" name="name">
</form>
<form>
<label for="POST-name">Name:</label>
<input id="POST-name" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Title</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Click me</label>
</fieldset>
</form>
</div>
Dies kann durch die Verwendung externer Bibliotheken weiter ausgebaut werden, die auf der Idee aufbauen, den "Umriss" zu modifizieren, anstatt ihn ganz zu entfernen, wie Materialisieren
Sie können mit sehr wenig Aufwand etwas schaffen, das nicht hässlich ist und funktioniert.
body {
background: #444
}
.wrapper {
padding: 2em;
width: 400px;
max-width: 100%;
text-align: center;
margin: 2em auto;
border: 1px solid #555
}
button,
.wrapper {
border-radius: 3px;
}
button {
padding: .25em 1em;
}
input,
label {
color: white !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />
<div class="wrapper">
<form>
<input type="text" placeholder="Enter Username" name="uname" required>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
</form>
</div>
