So entfernen Sie mit CSS den vom Browser einem Formular zugewiesenen Standardstil

Wenn wir ein Formular schreiben, werden wir feststellen, dass einige Browser dem Formular Standardstile zuweisen. Im Chrome-Browser haben Textfelder und Dropdown-Auswahlfelder beispielsweise leuchtende Ränder, wenn sie den Fokus laden, und in Firefox und Google Chrome kann der Textbereich mehrzeiliges Textfeldfrei verschoben und vergrößert werden. Außerdem erscheint unter IE10 bei der Eingabe von Inhalten in das Textfeld ein kleines Kreuz auf der rechten Seite Textfeld. Gabel, warte. Es besteht kein Zweifel, dass diese Effekte das Benutzererlebnis verbessert haben, aber manchmal benötigen wir diese Standardstile nicht. Was sollen wir also tun? Schauen wir uns die Lösungen separat an.

1. Entfernen Sie den standardmäßig leuchtenden Rand von Textfeldern in Browsern wie Chrome

input:focus, textarea:focus {
    outline: none;
}

Entfernen Sie den Hervorhebungsstil:

input:focus{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-user-modify:read-write-plaintext-only;
}

Natürlich ändern sich danach, wenn das Textfeld den Fokus lädt, die Ränder der Textfelder in allen Browsern nicht in Farbe oder Stil, aber wir können es entsprechend unseren eigenen Bedürfnissen erneut festlegen, z als:

input:focus,textarea:focus {
    outline: none;
    border: 1px solid #f60;
}

In diesem Fall ändert sich die Rahmenfarbe in Orange, wenn das Textfeld den Fokus lädt, und gibt dem Benutzer eine Rückmeldung.

2. Entfernen Sie das kleine Kreuz hinter dem Textfeld im IE10+-Browser

Nur ​​der folgende Satz ist in Ordnung

input::-ms-clear {
    display: none;
}

3 den Textbereich des mehrzeiligen Textfelds

und fügen Sie das Attribut hinzu, wie unten gezeigt. Das mehrzeilige Textfeld kann nicht durch Ziehen vergrößert oder verkleinert werden:

textarea {
    resize: none;
}

Hier ist ein Attribut zur Größenänderung zu erwähnen. Dies ist ein CSS3-Attribut, das für die Elementskalierung verwendet wird. Es kann die folgenden Werte annehmen:

keine beides, was horizontale und vertikale Richtungen ermöglicht

horizontal erlaubt nur horizontale Skalierung

vertikal erlaubt nur vertikale Skalierung

Nicht nur für Textbereichselemente, sondern auch für Die meisten Elemente wie Divs usw. werde ich hier nicht einzeln auflisten, aber im Gegensatz zu Textarea müssen Sie den Satz

overflow

hinzufügen: auto, wenn Sie div verwenden, das heißt, dies wird; haben die Wirkung:

div {
    resize: both;
    overflow: auto;
}

Das obige ist der detaillierte Inhalt vonSo entfernen Sie mit CSS den vom Browser einem Formular zugewiesenen Standardstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!