Detaillierte Grafik- und Texterklärung zur Verschönerung des Einzelauswahl- und Checkauswahlstils-CSS-Tutorial-php.cn

Detaillierte Grafik- und Texterklärung zur Verschönerung des Einzelauswahl- und Checkauswahlstils

php中世界最好的语言

Freigeben： 2018-03-22 13:10:16

Original

1887 Leute haben es durchsucht

Dieses Mal werde ich Ihnen eine detaillierte Bild- und Texterklärung zum Verschönern von Einzelauswahl- und Mehrfachauswahlstilen geben. HinweiseEs gibt welche. Im Folgenden finden Sie praktische Fälle. Werfen wir einen Blick darauf.

Vorwort

Ich glaube, jeder weiß, dass in Formularelementen Optionsschaltfläche und Häkchenschaltfläche Beides vorhanden ist ausgewählte und nicht ausgewählte Zustände. Es ist schwierig, die Standardstile dieser beiden Schaltflächen zu überschreiben. In CSS3 können wir benutzerdefinierte Stile über den Statusselektor „:checked“ und andere Tags implementieren. Mit CSS3 können wir ein sehr personalisiertes Benutzerformular erstellen. Der in diesem Artikel erzielte Effekt ist sehr gut.

Das Rendering ist wie folgt

Beispielcode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复选单选样式</title>
    <link rel="stylesheet" href="style.css">
</head>
<style>
    form {
      border: 1px solid #ccc;
      padding: 20px;
      width: 300px;
    }
    .wrapper {
      margin-bottom: 10px;
    }
    /*复选框*/
    .checkbox-box {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      position: relative;
      border: 2px solid orange;
      vertical-align: middle;
    }
    .checkbox-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      z-index:10;
    }
    .checkbox-box span {
      position: absolute;
      top: -10px;
      right: 3px;
      font-size: 30px;
      font-weight: bold;
      font-family: Arial;
      -webkit-transform: rotate(30deg);
      transform: rotate(30deg);
      color: orange;
    } 
    .checkbox-box input[type="checkbox"] + span {
      opacity:0;
    }
    .checkbox-box input[type="checkbox"]:checked + span {
      opacity: 1;
    }
    /*单选框*/
    .redio-box {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 10px;
      position: relative;
      background: orange;
      vertical-align: middle;
      border-radius: 100%;
    }
    .redio-box input {
      opacity: 0;
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height:100%;
      z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
    }
    .redio-box span { 
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      position: absolute;
      background: #fff;
      top: 50%;
      left:50%;
      margin: -5px 0  0 -5px;
      z-index:1;
    }
    .redio-box input[type="radio"] + span {
      opacity: 0;
    }
    .redio-box input[type="radio"]:checked + span {
      opacity: 1;
    }
</style>
<body>
<h2>复选框：</h2>
<form action="#">
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox" checked id="usename" />
      <span>√</span>
    </p>
    <label for="usename">体育</label>
  </p>
  
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"  id="usepwd" />
      <span>√</span>
    </p>
    <label for="usepwd">音乐</label>
  </p>
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"  id="checkbox3" />
      <span>√</span>
    </p>
    <label for="checkbox3">读书</label>
  </p>
  
  <p class="wrapper">
    <p class="checkbox-box">
      <input name="1" type="checkbox"   id="checkbox4" />
      <span>√</span>
    </p>
    <label for="checkbox4">运动</label>
  </p>
</form> 
<h2>单选框</h2>
<form action="#">
  <p class="wrapper">
    <p class="redio-box">
      <input type="radio" checked="checked"  id="boy" name="1" /><span></span>
    </p>
    <label for="boy">男</label>
  </p>
  
  <p class="wrapper">
    <p class="redio-box">
      <input type="radio"  id="girl" name="1" /><span></span>
    </p>
    <label for="girl">女</label>
  </p>
</form> 
</body>
</html>

Nach dem Login kopieren

Hinweis:

+ ist der angrenzende CSS-Selektor.

Es gibt nur vier Beziehungsselektoren, nämlich Leerzeichen > (einschließlich Selektoren, Unterselektoren, benachbarte Selektoren und Geschwisterselektoren)

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

CSS-Implementierung der Navigationsleiste der ersten Ebene

Detaillierte Erläuterung der Verwendung von Linear-Gradient

Häufige Missverständnisse bei der Verwendung von CSS und HTML

Das obige ist der detaillierte Inhalt vonDetaillierte Grafik- und Texterklärung zur Verschönerung des Einzelauswahl- und Checkauswahlstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!