5 unverzichtbare CSS-Anpassungscodes

Beim Erstellen von Seiten müssen Sie häufig das Standardverhalten einiger Tags (z. B. Eingabeplatzhalter usw.) anpassen. Das CSS dieser Standardeinstellungen ist jedoch im Allgemeinen schwer zu merken, daher ist dies erforderlich sich selbst aufzeichnen. Nachfolgend finden Sie einige CSS, die ich häufig zum Zurücksetzen des Standardverhaltens verwende.

1. Platzhalter

Beim Festlegen des Platzhalter-Attributs im -Tag muss manchmal die Standardfarbe oder Schriftart des Platzhalters geändert werden Größe, Sie können das folgende CSS verwenden:

// firefox
input::-moz-placeholder {
    color: red;
    font-size: 18px;
  }
// IE
input:-ms-input-placeholder {
  color: red;
  font-size: 18px;
}
// chrome
input::-webkit-input-placeholder {
  color: red;
  font-size: 18px;
}

Es ist zu beachten, dass verschiedene Browser unterschiedliche Schreibmethoden haben:

sollte mit dem Präfix jedes Browsers hinzugefügt werden (z. B. -webkit). - );

Es gibt keine Eingabe vor dem Platzhalter von Firefox;

Firefox und Chrome haben beide :: zwei Doppelpunkte, während IE einen : ; hat verschiedene Schreibmethoden;

Ein kleines Dreieck erscheint im Dropdown-Feld

Normalerweise entferne ich dieses kleine Dreieck oder ersetze die Methode durch derjenige, der die Anforderungen erfüllt. Entfernen Sie das CSS des kleinen Dreiecks:

Es gibt derzeit keine Möglichkeit, das kleine Dreieck im

IE-Browser

-webkit-appearance: none; -moz-appearance: none;

zu entfernen.

3. Die Drehregler rechts von input[type=number]

nput[type=number] werden normalerweise auf mobilen Geräten verwendet. Der Browser erkennt den Zahleneingabetyp und ändert ihn dann die numerische Tastatur, um sich daran zu gewöhnen. Aber es werden Spinner angezeigt, im Allgemeinen brauchen Sie es nicht. Das CSS zum Entfernen von Spinnern lautet wie folgt:

4. -webkit-tap-highlight-color

// firefox
input[type='number'] {
  -moz-appearance:textfield;
}
// chrome
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

Auf mobilen Browsern (wie den integrierten Browsern WeChat und QQ), wann Sie klicken Wenn ein Link oder ein durch

Javascript

definiertes anklickbares Element erscheint, erscheint ein blauer Rand. Ich hasse diesen Rand, daher entferne ich ihn normalerweise:

wird hoch sein Stellen Sie die helle Farbe auf transparent ein, sodass der blaue Rand nicht sichtbar ist.

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

5. Bildlaufleiste

WebKit unterstützt jetzt benutzerdefinierte Stile von Bildlaufleisten für Bereiche mit Überlaufattributen, Listenfeldern, Dropdown-Menüs und Textbereichen. Manchmal ist es notwendig, die Bildlaufleiste zu entfernen, insbesondere wenn mehrere Bildlaufleisten auf der Seite vorhanden sind:

Setzen Sie die Breite der Bildlaufleiste auf 0, um die Bildlaufleiste zu entfernen. Wenn Sie den Stil der Bildlaufleiste anpassen müssen, können Sie auf www.xuanfengge.com/css3-webkit-scrollbar.html klicken, um eine Einführung in die Anpassung des Stils der Bildlaufleiste zu erhalten.

::-webkit-scrollbar {
  width: 0;
}

Oben sind die CSS-Codes aufgeführt, die ich häufig in Projekten verwende, die nicht leicht zu merken sind. Wenn Ihre Freunde auch häufiger verwendete CSS-Codes haben, die nicht leicht zu merken sind, können Sie diese gerne hinzufügen.

[Verwandte Empfehlungen]

1.

Kostenloses CSS-Online-Video-Tutorial

2.CSS-Online-Handbuch

3. php.cn Dugu Jiujian (2) – CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt von5 unverzichtbare CSS-Anpassungscodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!