Hogyan készítsünk stílusos jelölőnégyzeteket és választógombokat CSS3-mal

Mindannyian ismerjük a HTML jelölőnégyzeteket és választógombokat. A leginkább frusztráló dolog az, hogy nincs mód a kinézetük megváltoztatására. Az operációs rendszertől és a böngészőtől függően eltérő módon néznek ki, és a CSS használatával sem tudjuk őket megváltoztatni.

Ez bosszantó lehet a legtöbb tervező számára, akik szeretnék ezeket az elemeket széppé tenni, hogy ne rontsák el a dizájnt. Ebben a bemutatóban megmutatom neked, hogyan lehet őket vonzóvá tenni egy egyszerű trükkel. Lássunk hozzá!

Légy erős. Rejtsd el jelölőnégyzeteidet!

Ez ellentmondásosnak tűnhet, de ahhoz, hogy a jelölőnégyzetek és a választógombok jól nézzenek ki, el kell azokat rejteni és elfelejteni! Ehhez egy egyszerű szabályt alkalmazunk:

.section input[type="radio"], .section input[type="checkbox"]{ display: none; }

De, Matthew, mondhatnád. Mégis mihez fogunk kezdeni nélkülük? Nyugi, nem kell aggódnod.
Megépítjük a saját jelölőnégyzeteinket. Lássunk is hozzá.

Választógombok

Először is, itt a mark-up:

<section id="first" class="section"> 
    <div class="container"> 
     <input type="radio" name="group1" id="radio-1"> 
     <label for="radio-1"><span class="radio">Coffee</span></label> 
    </div> 
    <div class="container"> 
      <input type="radio" name="group1" id="radio-2"> 
      <label for="radio-2"><span class="radio">Tea</span></label> 
    </div> 
    <div class="container"> 
      <input type="radio" name="group1" id="radio-3"> 
      <label for="radio-3"><span class="radio">Cappuccino</span></label> 
    </div> </section>

Van egy részünk, ahol három választógombot fogunk magába foglalni. A bemutatóban további jelölőnégyzeteket mutatunk, az elv ugyanaz. Minden bevitelt egy konténerosztályba tartozó div-ba csomagolják. Mindegyik bemenetnek van egy címkéje is, amelyben van egy span.

Fontos!

Mivel a választógombokat ::előtte és ::utána pszeudo elemekkel kívánjuk elkészíteni, anyaelemre van szükségünk, amely alapján elhelyezhető. Ebben az esetben ez lesz a mi címkénk:

.container label {
  position: relative;
}    

Itt van egy sor stílus, amely meg van osztva a jelölőnégyzetek és a választógombok között. 

.container span::before,
.container span::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

A felső és az alsó tulajdonságok nullára állítva, és a margóval kombinálva: auto; lehetővé teszik, hogy elemeinknek középpontba állított vízszintes helyzetük legyen.

Így néz ki a többi stílus:

.container span.radio:hover {
  cursor: pointer;
}
.container span.radio::before {
  left: -52px;
  width: 45px;
  height: 25px;
  background-color: #A8AAC1;
  border-radius: 50px;
}
.container span.radio::after {
  left: -49px;
  width: 17px;
  height: 17px;
  border-radius: 10px;
  background-color: #6C788A;
  transition: left .25s, background-color .25s;
}
input[type="radio"]:checked + label span.radio::after {
  left: -27px;
  background-color: #EBFF43;
}

A legfontosabb rész az utolsó szabálycsomag, amely lényegében kiteszi az egész trükköt. Az ellenőrzött pszeudo osztály lehetővé teszi az elemek módosítását, amikor a bevitelt ellenőrzik. A "+" szelektor segítségével kiválaszthatjuk a következő testvérelemet, és megcélozhatjuk span.radio-nkat, ahol új szabályokat alkalmazunk az :: after pseudo elemre. Ebben az esetben vízszintes helyzetét és színét változtatjuk.

Annak érdekében, hogy a kapcsoló sima legyen,  0,25 másodperces átmenetet rendelünk hozzá a bal oldali tulajdonsághoz és a háttérszínhez. Most, amikor rákattintunk a választógombra, a kapcsoló simán mozog ahelyett, hogy gyorsan ugorna.

Jelölőnégyzetek

Ha szeretnél létrehozni néhány jelölőnégyzetet, a módszer ugyanaz. Tekintsd meg a stílusokat:

.container span.checkbox::before {
  width: 27px;
  height: 27px;
  background-color: #fff;
  left: -35px;
  box-sizing: border-box;
  border: 3px solid transparent;
  transition: border-color .2s;
}
.container span.checkbox:hover::before {
  border: 3px solid #F0FF76;
}
.container span.checkbox::after {
  content: '\f00c';
  font-family: 'FontAwesome';
  left: -31px;
  top: 2px;
  color: transparent;
  transition: color .2s;
}
input[type="checkbox"]:checked + label span.checkbox::after {
  color: #62AFFF;
}

Az egyetlen különbség az, hogy a FontAwesome családból  használunk ikont, mint :: after pseudo elem. Alapértelmezés szerint átlátszó, de amikor bejelöli a jelölőnégyzetet, az ikon kékre vált.

Azonban

Ha a pszeudo elemedben FontAwesome ikont szeretnél használni, be kell vinned a kódját a tartalom tulajdonságba, és meg kell adnod a font-family tulajdonságot FontAwesome-ként. Például:

{
content: '\f00c';
font-family: 'FontAwesome';
}

Az f00c kódot egy backslash előzi meg, amely az unicode karakter elkerüléséhez szükséges. Az unicode megtalálható a kiválasztott ikon oldalán:

Eredmény

Ez az. Most létrehoztunk egy teljesen funkcionális és gyönyörű jelölőnégyzetet és választógombokat, amelyeket beilleszthetsz és használhatsz saját projektjeidhez. A teljes forráskód megtekinthető a CodePen demóban:

See the Pen Radio buttons and check boxes 2 by Matthew Cain (@matthewcain) on CodePen.

Ha hasznosnak találtad ezt az oktatóanyagot, vagy bármilyen kérdésed van, oszd meg velünk gondolataidat alul a megjegyzésekben. Köszi!

A bejegyzés angol verzióját itt találod: How To Make Stylish Checkboxes And Radio Buttons With CSS3