Skocz do zawartości

Zdjęcie
* * * * * 1 głosy

[Trick-CSS] Jak ostylować radio i checkbox? (+ efekt transition)

css input radio checkbox css-tricks

2 odpowiedzi w tym temacie
  • Zaloguj się, aby dodać odpowiedź
writen

    Stary wyjadacz

  • 458 postów
    • Czas spędzony online: 29d 22h 59m 44s
133
Znakomita!

Napisano 25 sierpnia 2015 - 12:58

#1

Jak nadać własne style elementom input radio i checkbox?

 

Wbrew pozorom nie jest to trudne zadanie. Jednak wiele osób nie wie jak to zrobić, bowiem nie da się nadać stylów tym elementom w standardowy sposób. Taki sposób nie zadziała:

input[type=checkbox] {
background: red;
border: 1px solid red;
}

Jak więc osiągnąć zamierzony efekt?

 

Jest to bardzo proste. Zazwyczaj elementowi input towarzyszy label i to on przejmie rolę tego pola.

<input type="checkbox" name="custom1" id="custom1"> <label for="custom1"> Label</label>

Dlatego więc ukryjemy nasz input właściwością display: none i najzwyczajniej ostylujemy element label. Nie możemy jednak zamienić całego label, ponieważ wewnątrz może znajdować się tekst opisujący nasze pole. Użyjemy do tego celu pseudoklasy :befor, po to żeby pole checkbox znalazło się przed naszym opisem.

label:befor powinien mieć pozycję absolutną, aby móc dokładnie ustalić jego położenie, a także być elementem blokowym (display: block). Reszta stylów (wysokość, szerokość, kolory) zależą od naszego uznania. Dodatkowo w poniższym przykładzie została dodana właściwość transition, dzięki temu osiągniemy efekt płynności podczas zaznaczania naszych pól.

 

W celu określenia co ma się stać gdy element będzie zaznaczony lub zablokowany należy użyć pseudoklas, kolejno :checked i :disabled

 

W celu uzyskania zamierzonego efektu należy zmienić, według uznania, właściwości background-colorborder-colorwidthheight. Zachęcam do eksperymentowania.

 

Demo: http://jsfiddle.net/writen/9L9bamcs

input[type=checkbox], input[type=radio] {
    display: none; /* ukrywamy nasz input */
}

input[type=checkbox] + label, input[type=radio] + label {
    position: relative;
    padding-left: 23px; /* margines wewnętrzny - trzeba zrobić trochę miejsca dla naszego pola */
}

input[type=checkbox] + label:before, input[type=radio] + label:before {
    position: absolute;
    content: "";
    display: block; /* koniecznie element blokowy, aby móc nadać odpowiednie wymiary */
    width: 10px;
    height: 10px;
    top: 0; /* ustalamy pozycje */
    left: 0;
    cursor: pointer; /* dodamy jeszcze odpowiedni kursor */
    transition: all .4s ease;
-webkit-transition: all .4s ease;
background-color: #cccccc;
    border: 3px solid #cccccc;
}

/* checkbox */
input[type=checkbox] + label:before {
    border-radius: 2px;
}

/* radio */
input[type=radio] + label:before {
    border-radius: 50%; /* aby input radio był okrągły */
}

/* gdy zaznaczony */
input[type=checkbox]:checked + label:before, input[type=radio]:checked + label:before {
    background-color: #ffffff;
}

/* gdy zablokowany */
input[type=checkbox]:disabled + label:before, input[type=radio]:disabled + label:before {
    background-color: #b6b6b6;
    border-color: #b6b6b6;
}

/* gdy zaznaczony i zablokowany */
input[type=checkbox]:checked:disabled + label:before, input[type=radio]:checked:disabled + label:before {
    background-color: #cccccc;
    border-color: #b6b6b6;
}

  • 4

logo-green-dark.png


zonic

    WT Elite

  • 2 911 postów
    • Czas spędzony online: 134d 2h 28m 23s
472
Znakomita!
  • LocationToruń

Napisano 25 sierpnia 2015 - 13:07

#2

Good job :) 


  • 1

Generacja

    Nowy użytkownik

  • 10 postów
    • Czas spędzony online: 15m 57s
0
Neutralna

Napisano 29 sierpnia 2015 - 15:27

#3

Bardzo dobra robota :P


  • 0





Podone tematy Collapse


Również z jednym lub większą ilością słów kluczowych: css, input, radio, checkbox, css-tricks

Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych