Wie kann man benutzerdefinierte Checkbox und benutzerdefinierten Radiobutton erstellen

Die Checkboxen und Radiobuttons sind HTML-Elemente, die zur Erfassung von Benutzereingaben verwendet werden. Während das Styling als ziemlich kompliziert angesehen wird, kann eine Checkbox mit Pseudoelementen wie: :before, :after, :active, :hover und :checked, gestaltet werden. Wenn Sie eine Checkbox oder ein Radiobutton stylen möchten, sollen Sie zuerst den Standardstil ausblenden.

In diesem Artikel werden wir drei wesentliche Punkte betrachten:

Wie kann man eine benutzerdefinierte Checkbox erstellen
Wie kann man einen benutzerdefinierten Radiobutton erstellen
Wie kann man benutzerdefinierte Bild-Checkboxen und Radiobuttons erstellen

Wie kann man eine benutzerdefinierte Checkbox erstellen

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .box { 
      display: block; 
      position: relative; 
      padding-left: 35px; 
      margin-bottom: 15px; 
      cursor: pointer; 
      font-size: 20px; 
      }   
      /* Hide the default style of the checkbox */ 
      input[type=checkbox] { 
      visibility: hidden; 
      } 
      /* Create a custom checkbox */ 
      .mark { 
      position: absolute; 
      top: 0; 
      left: 0; 
      height: 25px; 
      width: 25px; 
      background-color: #999999; 
      }     
      /* Specify the background color for the checkbox while hovering */ 
      .box:hover input + .mark { 
      background-color: #1c87c9; 
      }   
      /* Specify the background color for the checkbox when the checkbox is active */ 
      .box input:active + .mark { 
      background-color: #ffcc00; 
      } 
      /* Specify the background color for the checkbox when it is checked */ 
      .box input:checked + .mark { 
      background-color: #8ebf42; 
      } 
      /* Checkmark to be shown in checkbox */ 
      /* It will not be shown when not checked */ 
      .mark:after { 
      content: ""; 
      position: absolute; 
      display: none; 
      } 
      /* Display checkmark when checked */ 
      .box input:checked + .mark:after { 
      display: block; 
      }
      /* Styling the checkmark using webkit */ 
      /* Rotated the rectangle by 45 degree and showing only two border to make it look like a tick mark */ 
      .box .mark:after { 
      left: 8px; 
      bottom: 5px; 
      width: 6px; 
      height: 12px; 
      border: solid #eee; 
      border-width: 0 4px 4px 0; 
      -webkit-transform: rotate(45deg); 
      -ms-transform: rotate(45deg); 
      transform: rotate(45deg); 
      } 
    </style>
  </head>
  <body>
    <h2>Custom checkboxes</h2>
    <p>Aktivieren Sie eine Checkbox, um zu sehen, wie die Farben geändert werden:</p>
    <form>
      <label class="box">Stackdev
      <input type="checkbox"> 
      <span class="mark"></span> 
      </label> 
      <label class="box">W3docs
      <input type="checkbox" checked="checked"> 
      <span class="mark"></span> 
      </label> 
      <label class="box">Arcnet
      <input type="checkbox"> 
      <span class="mark"></span> 
      </label> 
    </form>
  </body>
</html>

Versuch es selber!

Um den Standard-Checkbox-Stil zu entfernen, müssen Sie die CSS-Eigenschaft visibility mit dem Wert "hidden" definieren. Oder verwenden Sie die CSS-Eigenschaft opacity mit Null (0).

Zuerst müssen Sie darüber nachdenken, in welchen Situationen Ihr Ankreuzfeld individuell gestaltet werden soll, z. B. wenn es normal, aktiv, schwebend oder markiert ist. Als nächstes definieren Sie für jede Situation separate Styles, wie sie im normalen CSS verwendet werden. Außerdem ist es wahrscheinlich, dass das Häkchen geändert wird.

Beispiel

Hier wird + der Geschwisterkombinator verwendet, um zwei Sequenzen von einfachen Selektoren mit dem gleichen Elternteil zu kombinieren, und der zweite muss unmittelbar nach dem ersten kommen.

Es kann auch der Selektor ~, der der Geschwisterkombinator ist, mit dem alle Elemente, denen der ehemalige Selektor vorausgeht, ausgewählt werden, verwendet werden.

Betrachten wir ein weiteres Beispiel mit anderem Design von Häkchen.

Verwenden Sie die CSS-Eigenschaft border, um ein anderes Häkchen zu erstellen.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .box { 
      display: block; 
      position: relative; 
      padding-left: 35px; 
      margin-bottom: 15px; 
      cursor: pointer; 
      font-size: 20px; 
      }   
      /* Hide the default style of the checkbox */ 
      input[type=checkbox] { 
      visibility: hidden; 
      } 
      /* Create a custom checkbox */ 
      .mark { 
      position: absolute; 
      top: 0; 
      left: 0; 
      height: 25px; 
      width: 25px; 
      background-color: #999999; 
      }     
      /* Specify the background color for the checkbox while hovering */ 
      .box:hover input ~ .mark { 
      background-color: #1c87c9; 
      }   
      /* Specify the background color for the checkbox when the checkbox is active */ 
      .box input:active ~ .mark { 
      background-color: #ffcc00; 
      } 
      /* Specify the background color for the checkbox when it is checked */ 
      .box input:checked ~ .mark { 
      background-color: #8ebf42; 
      } 
      /* Checkmark to be shown in checkbox */ 
      /* It will not be shown when not checked */ 
      .mark:after { 
      content: ""; 
      position: absolute; 
      display: none; 
      } 
      /* Display checkmark when checked */ 
      .box input:checked ~ .mark:after { 
      display: block; 
      } 
      /* Styling the checkmark using webkit */ 
      /* Rotated the rectangle by 45 degree and showing only two borders to make it look like a tick mark */ 
      .box .mark:after { 
      left: 5px; 
      bottom: 5px; 
      width: 6px; 
      height: 6px; 
      border: double #ffffff; 
      border-width: 4px 4px 4px 4px;
      } 
    </style>
  </head>
  <body>
    <h2>Benutzerdefinierte Checkbox</h2>
    <p>Aktivieren Sie eine Checkbox, um zu sehen, wie die Farben geändert werden:</p>
    <form>
      <label class="box">Stackdev
      <input type="checkbox"> 
      <span class="mark"></span> 
      </label> 
      <label class="box">W3docs
      <input type="checkbox" checked="checked"> 
      <span class="mark"></span> 
      </label> 
      <label class="box">Arcnet
      <input type="checkbox"> 
      <span class="mark"></span> 
      </label> 
    </form>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel, wo einige fantastische Kontrollkästchen wie Folien angezeigt sind.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      .exampleOne {
      width: 28px;
      height: 28px;
      position: relative;
      margin: 20px auto;
      background: #fcfff4;
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .exampleOne label {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 4px;
      left: 4px;
      cursor: pointer;
      background: linear-gradient(top, #222 0%, #45484d 100%);
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
      }
      .exampleOne label:after {
      content: '';
      width: 16px;
      height: 16px;
      position: absolute;
      top: 2px;
      left: 2px;
      background: #27ae60;
      background: linear-gradient(top, #27ae60 0%, #145b32 100%);
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      opacity: 0;
      }
      .exampleOne label:hover::after {
      opacity: 0.3;
      }
      .exampleOne input[type=checkbox] {
      visibility: hidden;
      }
      .exampleOne input[type=checkbox]:checked + label:after {
      opacity: 1;
      }
      .exampleTwo {
      width: 20px;
      position: relative;
      margin: 20px auto;
      }
      .exampleTwo label {
      width: 20px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(top, #222 0%, #45484d 100%);
      border-radius: 4px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, .4);
      }
      .exampleTwo label:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #fcfff4;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
      }
      .exampleTwo label:hover::after {
      opacity: 0.3;
      }
      .exampleTwo input[type=checkbox] {
      visibility: hidden;
      }
      .exampleTwo input[type=checkbox]:checked + label:after {
      opacity: 1;
      }
      .example {
      width: 20px;
      position: relative;
      margin: 20px auto;
      }
      .example label {
      width: 20px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      background: #fcfff4;
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      border-radius: 4px;
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .example label:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #333;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
      }
      .example label:hover::after {
      opacity: 0.5;
      }
      .example input[type=checkbox] {
      visibility: hidden;
      }
      .example input[type=checkbox]:checked + label:after {
      opacity: 1;
      }
      * {
      box-sizing: border-box;
      }
      body {
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
      }
      body h1, body h2, body p{
      color: #333;
      font-size: 30px;
      text-align: center;
      margin: 20px 0 0 0;
      -webkit-font-smoothing: antialiased;
      text-shadow: 0px 1px #000;
      }
      body p {
      font-size: 14px;
      text-align: center;
      display: block;
      margin-bottom: 50px;
      }
      body .ondisplay {
      text-align: center;
      padding: 20px 0;
      }
      body .ondisplay section {
      width: 150px;
      height: 80px;
      background: #555;
      display: inline-block;
      position: relative;
      text-align: center;
      margin-top: 5px;
      border: 1px solid gray;
      border-radius: 5px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      }
      body .ondisplay section:after {
      /*         visibility: hidden; */
      content: attr(title);
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 3px;
      color: #fff;
      font-size: 12px;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      text-shadow: 0px 1px #000;
      }
    </style>
  </head>
  <body>
    <h2>Benutzerdefinierte Checkbox</h2>
    <p>Wählen Sie die Checkbox, um den Effekt zu sehen:</p>
    <div class="ondisplay">
      <section title="exampleOne">
        <div class="exampleOne">
          <input type="checkbox" value="None" id="exampleOne" name="check" checked />
          <label for="exampleOne"></label>
        </div>
      </section>
      <section title="exampleTwo">
        <div class="exampleTwo">
          <input type="checkbox" value="None" id="exampleTwo" name="check" checked />
          <label for="exampleTwo"></label>
        </div>
      </section>
      <section title="example">
        <div class="example">
          <input type="checkbox" value="None" id="example" name="check" checked />
          <label for="example"></label>
        </div>
      </section>
    </div>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel für schön gestylte Kontrollkästchen.

Beispiel

<!DOCTYPE html> 
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style> 
      /* .exampleOne */
      .exampleOne {
      width: 50px;
      height: 10px;
      background: #333;
      margin: 20px auto;
      position: relative;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleOne label {
      display: block;
      width: 16px;
      height: 16px;
      position: absolute;
      top: -3px;
      left: -3px;
      cursor: pointer;
      background: #fcfff4;
      background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      border-radius: 50px;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
      transition: all 0.4s ease;
      }
      .exampleOne input[type=checkbox] {
      visibility: hidden;
      }
      .exampleOne input[type=checkbox]:checked + label {
      left: 37px;
      }
      /* end .exampleOne */
      /* .exampleTwo */
      .exampleTwo {
      width: 80px;
      height: 30px;
      background: #333;
      margin: 20px auto;
      position: relative;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleTwo:after {
      content: '';
      position: absolute;
      top: 14px;
      left: 14px;
      height: 2px;
      width: 52px;
      background: #111;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleTwo label {
      display: block;
      width: 22px;
      height: 22px;
      cursor: pointer;
      position: absolute;
      top: 4px;
      z-index: 1;
      left: 4px;
      background: #fcfff4;
      border-radius: 50px;
      transition: all 0.4s ease;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      }
      .exampleTwo label:after {
      content: '';
      width: 10px;
      height: 10px;
      position: absolute;
      top: 6px;
      left: 6px;
      background: #333;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 1), 0px 1px 0px rgba(255, 255, 255, 0.9);
      }
      .exampleTwo input[type=checkbox] {
      visibility: hidden;
      }
      .exampleTwo input[type=checkbox]:checked + label {
      left: 54px;
      }
      .exampleTwo input[type=checkbox]:checked + label:after {
      background: #27ae60;
      /*activeColor*/
      }
      /* end .exampleTwo */
      /* .exampleThree */
      .exampleThree {
      width: 80px;
      height: 26px;
      background: #333;
      margin: 20px auto;
      position: relative;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
      }
      .exampleThree:after {
      content: 'OFF';
      color: #000;
      position: absolute;
      right: 10px;
      z-index: 0;
      font: 12px/26px Arial, sans-serif;
      font-weight: bold;
      text-shadow: 1px 1px 0px rgba(255, 255, 255, .15);
      }
      .exampleThree:before {
      content: 'ON';
      color: #27ae60;
      position: absolute;
      left: 10px;
      z-index: 0;
      font: 12px/26px Arial, sans-serif;
      font-weight: bold;
      }
      .exampleThree label {
      display: block;
      width: 34px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      top: 3px;
      left: 3px;
      z-index: 1;
      background: #fcfff4;
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      border-radius: 50px;
      transition: all 0.4s ease;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
      }
      .exampleThree input[type=checkbox] {
      visibility: hidden;
      }
      .exampleThree input[type=checkbox]:checked + label {
      left: 43px;
      }
      /* end .exampleThree */
      /* .example */
      .example {
      width: 28px;
      height: 28px;
      position: relative;
      margin: 20px auto;
      background: #fcfff4;
      background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .example label {
      width: 20px;
      height: 20px;
      cursor: pointer;
      position: absolute;
      left: 4px;
      top: 4px;
      background: linear-gradient(top, #222 0%, #45484d 100%);
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
      }
      .example label:after {
      content: '';
      width: 16px;
      height: 16px;
      position: absolute;
      top: 2px;
      left: 2px;
      background: #27ae60;
      background: linear-gradient(top, #27ae60 0%, #145b32 100%);
      opacity: 0;
      border-radius: 50px;
      box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
      .example label:hover::after {
      opacity: 0.3;
      }
      .example input[type=checkbox] {
      visibility: hidden;
      }
      .example input[type=checkbox]:checked + label:after {
      opacity: 1;
      }
      /* end .example */
      * {
      box-sizing: border-box;
      }
      body {
      font-family: 'Open Sans', sans-serif;
      font-weight: 300;
      }
      body h2, body p {
      color: #333;
      font-size: 30px;
      text-align: center;
      margin: 20px 0 0 0;
      -webkit-font-smoothing: antialiased;
      text-shadow: 0px 1px #000;
      }
      body p {
      font-size: 14px;
      text-align: center;
      display: block;
      margin-bottom: 50px;
      }
      body .ondisplay {
      text-align: center;
      padding: 20px 0;
      }
      body .ondisplay section {
      width: 150px;
      height: 80px;
      background: #555;
      display: inline-block;
      position: relative;
      text-align: center;
      margin-top: 5px;
      border: 1px solid gray;
      border-radius: 5px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      }
      body .ondisplay section:after {
      /*         visibility: hidden; */
      content: attr(title);
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 3px;
      color: #fff;
      font-size: 12px;
      font-weight: 400;
      -webkit-font-smoothing: antialiased;
      text-shadow: 0px 1px #000;
      }
    </style>
  </head>
  <body>
    <h2>Benutzerdefinierte Checkbox</h2>
    <p>>Wählen Sie die Checkbox, um den Effekt zu sehen:</p>
    <div class="ondisplay">
      <section title="exampleOne">
        <div class="exampleOne">  
          <input type="checkbox" value="None" id="exampleOne" name="check" checked />
          <label for="exampleOne"></label>
        </div>
      </section>
      <section title="exampleTwo">
        <div class="exampleTwo">  
          <input type="checkbox" value="None" id="exampleTwo" name="check" checked />
          <label for="exampleTwo"></label>
        </div>
      </section>
      <section title="exampleThree">
        <div class="exampleThree">  
          <input type="checkbox" value="None" id="exampleThree" name="check" checked />
          <label for="exampleThree"></label>
        </div>
      </section>
      <section title="example">
        <div class="example">
          <input type="checkbox" value="None" id="example" name="check" checked />
          <label for="example"></label>
        </div>
      </section>
    </div>
  </body>
</html>

Versuch es selber!

Wie kann man einen benutzerdefinierten Radiobutton erstellen

Häufig müssen Sie den Standard-Radio-Button-Stil ändern, um attraktive Formulare zu erhalten. Zu diesem Zweck müssen Sie zunächst den Standardstil des Radiobuttons ausblenden, indem Sie die CSS-Eigenschaft opacity auf Null (0) einstellen. Oder verwenden Sie die Eigenschaft visibility mit dem Wert "hidden". Fügen Sie dann Ihre bevorzugten Stile hinzu.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      /* The container */
      .container {
      display: block;
      position: relative;
      padding-left: 30px;
      margin-bottom: 10px;
      cursor: pointer;
      font-size: 20px;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      }
      /* Hide the browser's default radio button */
      .container input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      }
      /* Create a custom radio button */
      .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      width: 25px;
      background-color: #eeeeee;
      border-radius: 50%;
      }
      /* On mouse-over, add a gray background color */
      .container:hover input ~ .checkmark {
      background-color: #999999;
      }
      /* When the radio button is selected, add a blue background */
      .container input:checked ~ .checkmark {
      background-color: #1c87c9;
      }
      /* Create the indicator (the dot/circle - hidden when not checked) */
      .checkmark:after {
      content: "";
      position: absolute;
      display: none;
      }
      /* Show the indicator (dot/circle) when checked */
      .container input:checked ~ .checkmark:after {
      display: block;
      }
      /* Style the indicator (dot/circle) */
      .container .checkmark:after {
      top: 9px;
      left: 9px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #eeeeee;
      }
    </style>
  </head>
  <body>
    <h2>Benutzerdefinierte Radiobuttons</h2>
    <form>
      <label class="container">W3docs
      <input type="radio" checked="checked" name="radio">
      <span class="checkmark"></span>
      </label>
      <label class="container">Stackdev
      <input type="radio" name="radio">
      <span class="checkmark"></span>
      </label>
      <label class="container">Arcnet
      <input type="radio" name="radio">
      <span class="checkmark"></span>
      </label>
    </form>
  </body>
</html>

Versuch es selber!

Wie kann man benutzerdefinierte Bild-Checkboxen und Radiobuttons erstellen

Es ist auch möglich, einen Hintergrund als Häkchen einzustellen, indem man die Eigenschaften background oder background-image mit einigen jQuery verwenden.

Als nächstes bereiten Sie verschiedene Bilder vor, die als Häkchen gesetzt werden können. Eine für den Fall, dass das Kontrollkästchen oder die Optionsschaltfläche nicht ausgewählt ist, die zweite für ein Kontrollkästchen, wenn es mit der Maus bewegt wird, und die dritte für ein Kontrollkästchen, wenn es ausgewählt ist. Sie benötigen auch drei Bilder für den Radiobutton.

Sehen Sie sich nun ein Beispiel für ein Kontrollkästchen mit benutzerdefiniertem Hintergrundbild an.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .custom-checkbox {
      width: 20px;
      height: 20px;
      display: inline-block;
      position: relative;
      z-index: 1;
      top: 5px;
      background: url("/uploads/media/default/0001/03/483349bb5ad90c3556217ac81ff8f0042c3d72fe.png") no-repeat;
      }
      .custom-checkbox:hover {
      background: url("/uploads/media/default/0001/03/c2c03c6386a75dab0f4787cea57b4a27b3261379.png") no-repeat;
      }
      .custom-checkbox.selected {
      background: url("/uploads/media/default/0001/03/499ee5a518caa7ef7f3367b69e368c791a9591f2.png") no-repeat;
      }
      .custom-checkbox input[type="checkbox"] {
      margin: 0;
      position: absolute;
      z-index: 2;            
      cursor: pointer;
      outline: none;
      opacity: 0;
      /* for older browsers */
      _noFocusLine: expression(this.hideFocus=true); 
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      -khtml-opacity: 0;
      -moz-opacity: 0;
      }
      /* Beautify the Form */
      form{
      margin: 20px;
      }
      label{
      display: block;
      padding: 3px 0;
      }
      input[type="submit"] {
      width: 100px;
      height: 30px;
      background: #eeeeee;
      border: 1px solid #999999;
      border-radius: 3px;
      margin-top: 20px;
      padding: 4px 10px;
      cursor: pointer;
      outline: none;
      font-weight: bold;
      color: #333333;
      }
      input[type="submit"]:hover {
      color: #fff;
      border-color: #eeeeee;
      background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <form>
      <h3>Wählen Sie Ihre Lieblingsgetränke aus</h3>
      <label>
      <input type="checkbox" name="drinks[]" value="americano" /> 
      Americano
      </label>
      <label>
      <input type="checkbox" name="drinks[]" value="espresso" /> 
      Espresso
      </label>
      <label>
      <input type="checkbox" name="drinks[]" value="iced-tea" /> 
      Iced Tea
      </label>
      <label>
      <input type="checkbox" name="drinks[]" value="hot-chocolate" /> 
      Hot Chocolate
      </label>
      <h3>Wählen Sie Ihre Lieblingsautos aus</h3>
      <label>
      <input type="checkbox" name="car[]" value="jeep" /> 
      Jeep
      </label>
      <label>
      <input type="checkbox" name="car[]" value="lada" /> 
      Lada
      </label>
      <label>
      <input type="checkbox" name="car[]" value="audi" />
      Audi
      </label>
      <label>
      <input type="checkbox" name="car[]" value="mercedes" />
      Mercedes
      </label>
      <h3>Confirm?</h3>
      <label>
      <input type="checkbox" name="confirm" checked="checked" value="yes" /> 
      Yes
      </label>
      <input type="submit" value="Submit"/>
    </form>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
      function customCheckbox(checkboxName){
          var checkBox = $('input[name="'+ checkboxName +'"]');
          $(checkBox).each(function(){
              $(this).wrap( "<span class='custom-checkbox'></span>" );
              if($(this).is(':checked')){
                  $(this).parent().addClass("selected");
              }
          });
          $(checkBox).click(function(){
              $(this).parent().toggleClass("selected");
          });
      }
      $(document).ready(function (){
          customCheckbox("drinks[]");
          customCheckbox("car[]");
          customCheckbox("confirm");
      })
    </script>
  </body>
</html>

Versuch es selber!

Ein weiteres Beispiel für einen Radiobutton mit eigenem Hintergrundbild.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      .custom-radio {
      width: 20px;
      height: 20px;
      display: inline-block;
      position: relative;
      z-index: 1;
      top: 5px;
      background: url("/uploads/media/default/0001/03/b3bdb04777eb889cfdfe1e44c0fca7b6896cc9b5.png") no-repeat;
      }
      .custom-radio:hover {            
      background: url("/uploads/media/default/0001/03/27b06624c37686ed1a1a673ac230366a91c9cfba.png") no-repeat;
      }
      .custom-radio.selected {
      background: url("/uploads/media/default/0001/03/66199bdb5884a7f502448ee44acfb48887c889bf.png") no-repeat;
      }
      .custom-radio input[type="radio"]{
      margin: 1px;
      position: absolute;
      z-index: 2;            
      cursor: pointer;
      outline: none;
      opacity: 0;
      /* CSS hacks for older browsers */
      _noFocusLine: expression(this.hideFocus=true); 
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      -khtml-opacity: 0;
      -moz-opacity: 0;
      }
      /* Beautify the Form */
      form{
      margin: 20px;
      }
      label{
      display: block;
      padding: 2px 0;
      }
      input[type="submit"] {
      width: 100px;
      height: 30px;
      background: #eeeeee;
      border: 1px solid #999999;
      border-radius: 3px;
      margin-top: 20px;
      padding: 4px 10px;
      cursor: pointer;
      outline: none;
      font-weight: bold;
      color: #333333;
      }
      input[type="submit"]:hover {
      color: #fff;
      border-color: #eeeeee;
      background-color: #ffcc00;
      }
    </style>
  </head>
  <body>
    <form>
      <h3>Ihr Lieblings-Webbrowser</h3>
      <label><input type="radio" name="browser" value="chrome"> Chrome</label>
      <label><input type="radio" name="browser" value="firefox"> Firefox</label>  
      <label><input type="radio" name="browser" value="opera"> Opera</label>
      <h3>Ihre Lieblings-Suchmaschine</h3>
      <label><input type="radio" name="search-engine" value="google"> Google</label>
      <label><input type="radio" name="search-engine" value="yahoo"> Yahoo</label>
      <label><input type="radio" name="search-engine" value="bing"> Bing</label>      
      <h3>Confirm?</h3>
      <label><input type="radio" name="confirm" checked="checked" value="yes"> Yes</label>
      <label><input type="radio" name="confirm" value="no"> No</label>
      <input type="submit" value="Submit">
    </form>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
      function customRadio(radioName){
          var radioButton = $('input[name="'+ radioName +'"]');
          $(radioButton).each(function(){
              $(this).wrap( "<span class='custom-radio'></span>" );
              if($(this).is(':checked')){
                  $(this).parent().addClass("selected");
              }
          });
          $(radioButton).click(function(){
              if($(this).is(':checked')){
                  $(this).parent().addClass("selected");
              }
              $(radioButton).not(this).each(function(){
                  $(this).parent().removeClass("selected");
              });
          });
      }
      $(document).ready(function (){
          customRadio("browser");
          customRadio("search-engine");            
          customRadio("confirm");
      })
    </script>
  </body>
</html>

Versuch es selber!

Ein weiteres lustiges Beispiel, wo Emojis als Radiobuttons eingestellt sind.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      strong{
      display: block;
      padding-left: 30px;
      margin-bottom: 10px;
      }
      label {
      display: block;
      position: relative;
      padding-left: 30px;
      margin-bottom: 10px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      }
      .customize-radio label > input[type = 'radio'] {
      visibility: hidden;
      position: absolute;
      }
      .customize-radio label > input[type = 'radio'] ~ span {
      cursor: pointer;
      width: 31px;
      height: 31px;
      display: inline-block;
      background-size: 31px 31px;
      background-repeat: no-repeat;
      vertical-align: middle;
      }
      .happy {
      background-image: url("/uploads/media/default/0001/03/6819c91c6e19febea25c93b1923427482a6652cd.png");
      }
      .sad {
      background-image: url("/uploads/media/default/0001/03/626aae8381eddd269282a2c5871715e4303a93de.png");
      }
      .love {
      background-image: url("/uploads/media/default/0001/03/e4d188f2ee21a937a23e2d3e94f1aced2fa3c662.png");
      }
      .customize-radio label > input[type = 'radio']:checked ~ span.happy {
      background-image: url("/uploads/media/default/0001/03/67b31cf9b5e4a31624b2ffc00f483be0bef2511d.png");
      }
      .customize-radio label > input[type = 'radio']:checked ~ span.sad {
      background-image: url("/uploads/media/default/0001/03/1f0a4d909e8756a7cfff70a9125a2736740a3fc9.png");
      }
      .customize-radio label > input[type = 'radio']:checked ~ span.love {
      background-image: url("/uploads/media/default/0001/03/5bdfbcf51b653b5d8518b30b7876b43e352e3236.png");
      }
    </style>
  </head>
  <body>
    <form class="customize-radio">
      <strong>Wie geht es Ihnen heute?</strong><br>
      <label for="happy">
      <input type="radio" name="smiley" id="happy">
      <span class="happy"></span>
      GLÜCKLICH
      </label>
      <label for="sad">
      <input type="radio" name="smiley" id="sad">
      <span class="sad"></span>
      TRAURIG
      </label>
      <label for="love">
      <input type="radio" name="smiley" id="love" checked>
      <span class="love"></span>
      GROSSARTIG
      </label>
    </form>
  </body>
</html>

Versuch es selber!

Wie kann man benutzerdefinierte Checkbox und benutzerdefinierten Radiobutton erstellen

Wie kann man eine benutzerdefinierte Checkbox erstellen

Beispiel

Beispiel

Beispiel

Beispiel

Wie kann man einen benutzerdefinierten Radiobutton erstellen

Wie kann man benutzerdefinierte Bild-Checkboxen und Radiobuttons erstellen

Beispiel

Beispiel

Beispiel

Ähnliche Quellen