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