suchen

Heim >Backend-Entwicklung >PHP-Tutorial >So ändern Sie die Standard-Radio- und Kontrollkästchen-Stile mit CSS

So ändern Sie die Standard-Radio- und Kontrollkästchen-Stile mit CSS

不言
不言Original
2018-07-21 10:42:241905Durchsuche

In diesem Artikel erfahren Sie, wie Sie die Standard-Radio- und Kontrollkästchen-Stile mit CSS ändern. Der Inhalt ist sehr gut. Ich hoffe, er kann allen helfen.

Verwenden Sie die CSS-Label-Pseudoklasse (::before), um das Kontrollkästchen und die Radioeffekte zu ersetzen:

  1. Vorteile: Es werden Bilder benötigt, um die Stile vorher und nachher anzupassen Auswahl. Reines CSS

  2. Nachteile: Kompatibilität, nicht unterstützt unter IE8

Code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css改变默认的radio和checkbox的样式</title>
  <style>
    input[type="radio"],
    input[type=&#39;checkbox&#39;] {
      display: none;
    }

    input[type=&#39;radio&#39;]+label::before,
    input[type=&#39;checkbox&#39;]+label::before {
      content: &#39;&#39;;
      display: inline-block;
      width: 15px;
      height: 15px;
      margin-right: 6px;
      border-radius: 100%;
      vertical-align: middle;
      border: 1px solid #E4E4E4;
      background: #FFFFFF;
      background-image: url(&#39;https://i.loli.net/2018/07/20/5b517d0bf066a.png&#39;);
      background-position: 0px 0px;
    }

    input[type=&#39;radio&#39;]:hover+label::before,
    input[type=&#39;checkbox&#39;]:hover+label::before {
      background-position: -15px 0px;
    }

    input[type=&#39;radio&#39;]:checked+label::before,
    input[type=&#39;checkbox&#39;]:checked+label::before {
      background-position: -15px -15px;
    }
  </style>
</head>

<body>
  <p>单选框</p>
  <input type="radio" name="sex" value="man" id="man" checked>
  <label for="man">男</label>
  <input type="radio" name="sex" value="female" id="female">
  <label for="female">女</label>
  <p>多选框</p>
  <input type="checkbox" name="fruits" value="apple" id="apple" checked>
  <label for="apple">苹果</label>
  <input type="checkbox" name="fruits" value="orange" id="orange">
  <label for="orange">橙子</label>
</body>

</html>

Verwandte Empfehlungen:

Wie CSS Sprite die Bildstichtechnologie implementiert

So legen Sie einen Randeffekt für ein Bild über das CSS-Randattribut fest

Das obige ist der detaillierte Inhalt vonSo ändern Sie die Standard-Radio- und Kontrollkästchen-Stile mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie füge ich Benutzerfunktionen manuell im YII2.0-Hintergrund hinzu? Welche Klasse wird zur Implementierung verwendet?Nächster Artikel：Wie füge ich Benutzerfunktionen manuell im YII2.0-Hintergrund hinzu? Welche Klasse wird zur Implementierung verwendet?

In Verbindung stehende Artikel

Mehr sehen