Wie kann man die Ränder (Umrandung) um Texteingabefelder in Google Chrome entfernen und gestalten
Im Browser Google Chrome werden die Felder <input>, <textarea> und <select> im Eingabeformular form regelmäßig mit blauem oder orangem Rand umrandet. Das geschieht nur auf Chrome, um zu erkennen, dass das Eingabefeld aktiv ist. Das ist das Standardverhalten von Google Chrome, aber wenn Sie es entfernen möchten, um klare Felder in Ihren Formularen zu haben, können Sie es tun, indem Sie die CSS-Eigenschaft outline auf den Wert "none", der verwendet wird, um keine Outline anzuzeigen, einstellen. Verwenden Sie auch die Pseudo-Klasse :focus, um die Formularfelder, die vom Benutzer benutzt werden, zu gestalten.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
body {
background-color: #eee;
}
input {
border-top-style: hidden;
border-right-style: hidden;
border-left-style: hidden;
border-bottom-style: groove;
background-color: #eee;
}
.no-outline:focus {
outline: none;
}
</style>
</head>
<body>
<form>
<p>Gewöhnliches Eingabefeld mit Boxenumrandung:</p>
<input type="text" placeholder="Text eingeben">
<p>Eingabefeld ohne Umriss:</p>
<input type="text" class="no-outline" placeholder="Text eingeben">
</form>
</body>
</html>Das Entfernen der Ränder erschwert das Leben, wenn viele Formularfelder verwendet werden oder es mehrere Formulare auf einer Seite gibt, wissen die Benutzer oft nicht, in welchem Feld sie tippen.
Ein Beispiel für <form>, wo mehrere Felder <input> verwendet werden. Jedes Mal, wenn der Benutzer auf ein Feld klickt, erhält es eine Rahmenfarbe, die anzeigt, dass das Feld aktiv ist.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
input{
padding:5px;
margin-bottom:5px;
}
form, label {
margin: 10px;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="Ein Platzhalter" />
<input type="text" placeholder="Ein Platzhalter" />
<input type="text" placeholder="Ein Platzhalter" />
<input type="text" placeholder="Ein Platzhalter" />
<input type="text" placeholder="Ein Platzhalter" />
<input type="text" placeholder="Ein Platzhalter" />
</form>
<form>
Vorname:<br>
<input type="text" name="fname"><br>
Nachname:<br>
<input type="text" name="lname">
</form>
<form>
<input type="radio" name="gender" value="male" checked>Männlich<br>
<input type="radio" name="gender" value="female">Weiblich<br>
<input type="radio" name="gender" value="other">Sonstig
</form>
<form>
<label for="field">Ein Formularfeld</label>
<input id="field" type="text" name="name">
</form>
<form>
<label for="field1">Anderer Formularfeld</label>
<input id="field1" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Frage</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Variante 1</label>
<input type="radio" name="radio1" id="radio1">
<label for="radio1">Variante 2</label>
</fieldset>
</form>
</div>
</body>
</html>Nun, lassen Sie uns die gleiche Form sehen, wenn der Rand entfernt wird:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
input{
padding:5px;
margin-bottom:5px;
outline: none;
}
form, label {
margin: 10px;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="Ein Platzhalter" />
<input type="text" placeholder="Ein Platzhalter" />
<input type="text" placeholder="Ein Platzhalter" />
<input type="text" placeholder="Ein Platzhalter" />
<input type="text" placeholder="Ein Platzhalter" />
<input type="text" placeholder="Ein Platzhalter" />
</form>
<form>
Vorname:<br>
<input type="text" name="fname"><br>
Nachname:<br>
<input type="text" name="lname">
</form>
<form>
<input type="radio" name="gender" value="male" checked> Männlich<br>
<input type="radio" name="gender" value="female">Weiblich<br>
<input type="radio" name="gender" value="other">Sonstig
</form>
<form>
<label for="field">Ein Formularfeld</label>
<input id="field" type="text" name="name">
</form>
<form>
<label for="field1">Anderer Formularfeld</label>
<input id="field1" type="text" name="name">
</form>
<form>
<fieldset>
<legend>Frage</legend>
<input type="radio" name="radio" id="radio">
<label for="radio">Variante 1</label>
<input type="radio" name="radio1" id="radio1">
<label for="radio1">Variante 2</label>
</fieldset>
</form>
</div>
</body>
</html>Im angegebenen Beispiel ist es für einen Benutzer viel schwieriger, das Formular auszufüllen, wenn er nicht klar sieht, welches Eingabefeld gerade aktiv ist.
Aus diesem Grund wird es empfohlen, die Standardumrandung zu entfernen und dem Feld einen eigenen Stil hinzuzufügen, der anzeigt, dass es aktiv ist, wenn ein Benutzer darauf klickt.
Entfernen Sie den Rand und fügen Sie einen Rahmenstil mit den Pseudoklassen :focus and :active mit dem Feld <input> hinzu. Sie können die Standard-Ränder auf bestimmten Seiten auch entfernen, indem Sie sie auf "transparent" einstellen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
input {
padding:5px;
margin:5px 0;
outline: none;
}
input:focus,
input:active {
border-color: transparent;
border-bottom: 2px solid #1c87c9;
}
</style>
</head>
<body>
<form>
<label for="myOutline">Klicken Sie auf die untenstehende Eingabe, um zu sehen, wie die gestylten Umrisse aussehen.</label><br>
<input type="text" id="myOutline" placeholder="Text eingeben" />
</form>
</body>
</html>Ein weiteres Beispiel, wo outline: none; für die Felder <input>, <textarea> und <select> eingestellt ist.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
input,textarea{
padding:5px;
}
span{
display:block;
padding:15px 0 3px;
}
input:focus, textarea:focus, select:focus {
outline: none;
}
</style>
</head>
<body>
<h3>Removed Input Highlighting for input, textarea and select form fields</h3>
<form>
<span>Ein Eingabefeld:</span>
<input type="text">
<span>Ein Eingabefeld:</span>
<textarea></textarea>
<span>Ein Auswahlfeld:</span>
<select>
<option>Wählen</option>
<option>Wählen</option>
</select>
</form>
</body>
</html>