{"id":5755,"date":"2018-04-24T11:24:55","date_gmt":"2018-04-24T11:24:55","guid":{"rendered":"https:\/\/www.templatemonster.com\/pl\/blog\/?p=5755"},"modified":"2018-05-02T10:32:04","modified_gmt":"2018-05-02T10:32:04","slug":"checkboxy-i-przyciski-opcji-w-css3","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/pl\/checkboxy-i-przyciski-opcji-w-css3\/","title":{"rendered":"Jak zrobi\u0107 stylowe checkboxy i przyciski opcji w CSS3"},"content":{"rendered":"

Wszyscy znamy o HTML checkboxach\u00a0i przyciskach opcji<\/strong>. Najbardziej frustruj\u0105ce jest to, \u017ce nie mo\u017cemy zmieni\u0107 ich wygl\u0105du. Wygl\u0105daj\u0105 inaczej, w zale\u017cno\u015bci od systemu operacyjnego i przegl\u0105darki, i nie mo\u017cemy ich stylizowa\u0107 za pomoc\u0105 CSS.<\/p>\n

Mo\u017ce to by\u0107 denerwuj\u0105ce dla wi\u0119kszo\u015bci projektant\u00f3w, kt\u00f3rzy chc\u0105 aby te elementy\u00a0wygl\u0105dali atrakcyjnie\u00a0i nie psuwali\u00a0ogolnego wygl\u0105du projektu. W tym\u00a0tutorial poka\u017c\u0119, jak zrobi\u0107 aby te elementy wygl\u0105dali uroczo i stylowo!<\/p>\n

\n
<\/div>\n

Tworzenie responsywnych stron: jakie masz opcje? [Darmowa e-ksi\u0105\u017cka]\n

<\/p>\n

\n
\n
\n
\n

<\/p>\n<\/div>\n

<\/div>\n
<\/div>\n<\/div>\n<\/form>\n<\/div>\n
\n
<\/div>\n

Zapomnij o swoch polach wyboru<\/h3>\n

Aby nasze\u00a0checkboxy\u00a0i przyciski\u00a0opcji wygl\u0105dali wspaniale, musimy je ukry\u0107 i zapomie\u0107 o nich! Stosujemy prost\u0105 regul\u0119:<\/p>\n

.section<\/span><\/span> input<\/span><\/span>[type=\"radio\"],\r\n<\/span>.section<\/span><\/span> input<\/span><\/span>[type=\"checkbox\"]{\r\n  <\/span>display<\/span><\/span>: <\/span>none<\/span><\/span>;\r\n}1<\/span><\/span>\r\n<\/pre>\n
Ale co b\u0119dziemy robili bez nich, mo\u017cesz zapyta\u0107 Ty.\u00a0Nie martw si\u0119, zbudujemy w\u0142asne pola wyboru, z blackjackiem i<\/strong> ... c\u00f3\u017c, po prostu zacznijmy prcowa\u0107.<\/p>\n
Przycisk opcji<\/h3>\n
Po pierwsze, nasz mark-up:<\/p>\n
<section<\/span> id<\/span>=\"first\"<\/span> class<\/span>=\"section\"<\/span>><\/span>\r\n    <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\r\n      <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"group1\"<\/span> id<\/span>=\"radio-1\"<\/span>><\/span>\r\n      <label<\/span> for<\/span>=\"radio-1\"<\/span>><\/span><span<\/span> class<\/span>=\"radio\"<\/span>><\/span>Coffee<\/span<\/span>><\/span><\/label<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n    <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\r\n      <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"group1\"<\/span> id<\/span>=\"radio-2\"<\/span>><\/span>\r\n      <label<\/span> for<\/span>=\"radio-2\"<\/span>><\/span><span<\/span> class<\/span>=\"radio\"<\/span>><\/span>Tea<\/span<\/span>><\/span><\/label<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n    <div<\/span> class<\/span>=\"container\"<\/span>><\/span>\r\n      <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"group1\"<\/span> id<\/span>=\"radio-3\"<\/span>><\/span>\r\n      <label<\/span> for<\/span>=\"radio-3\"<\/span>><\/span><span<\/span> class<\/span>=\"radio\"<\/span>><\/span>Cappuccino<\/span<\/span>><\/span><\/label<\/span>><\/span>\r\n    <\/div<\/span>><\/span>\r\n<\/section<\/span>><\/span>\r\n<\/pre>\n
Mamy sekcj\u0119,\u00a0do kt\u00f3rej dodamy trzy przyciski opcji. W tym\u00a0tutorial\u00a0om\u00f3wimy\u00a0tworzenie p\u00f3l wyboru. Ka\u017cdy input\u00a0jest dodany\u00a0do elementu div z klas\u0105 pojemnika. Ka\u017cdy input ma r\u00f3wnie\u017c etykiet\u0119 ze znacznikiem span.<\/p>\n
Wa\u017cne!<\/strong><\/p>\n
Poniewa\u017c ukryli\u015bmy pola wyboru i opcji, jedynym sposobem, aby\u015bmy mogli uzyska\u0107 do nich dost\u0119p\u00a0jest tag etykiety. Aby poprawnie dzia\u0142a\u0142, tag etykiety musi zawiera\u0107 atrybut\u00a0\u00a0for<\/code>\u00a0z identyfikatorem odpowiedniego wej\u015bcia. Je\u015bli dane wej\u015bciowe maj\u0105 ID\u00a0radio-1<\/code>, wtedy dla artybutu\u00a0for<\/code>\u00a0identyfikator musi by\u0107 r\u00f3wnie\u017c\u00a0radio-1<\/code>.<\/p>\n
By\u0107 mo\u017ce zastanawiasz si\u0119, dlaczego zawin\u0105\u0142am tekst wewn\u0105trz ka\u017cdej etykiety w znacznik span:<\/p>\n
<div<\/span> class<\/span>=\"container\"<\/span>><\/span>\r\n      <input<\/span> type<\/span>=\"radio\"<\/span> name<\/span>=\"group1\"<\/span> id<\/span>=\"radio-1\"<\/span>><\/span>\r\n      <label<\/span> for<\/span>=\"radio-1\"<\/span>><\/span><span<\/span> class<\/span>=\"radio\"<\/span>><\/span>Coffee<\/span<\/span>><\/span><\/label<\/span>><\/span>\r\n<\/div<\/span>><\/span>\r\n<\/pre>\n
Poniewa\u017c zamierzamy stylizowa\u0107 przyciski\u00a0opcji za pomoc\u0105 pseudo element\u00f3w\u00a0::before<\/code>\u00a0i\u00a0::after<\/code>, potrzebujemy elementu nadrz\u0119dnego, na podstawie kt\u00f3rego mo\u017cna je ustawi\u0107. W tym przypadku b\u0119dzie to nasza etykieta:<\/p>\n
.container<\/span> label<\/span> {\r\n  position<\/span>: relative<\/span>;\r\n}\r\n<\/pre>\n
Oto zestaw styl\u00f3w, kt\u00f3ry jest wsp\u00f3lny dla p\u00f3l wyboru i przycisk\u00f3w opcji:<\/p>\n
.container<\/span> span<\/span>::before<\/span>,\r\n.container<\/span> span<\/span>::after<\/span> {\r\n  content<\/span>: ''<\/span>;\r\n  position<\/span>: absolute<\/span>;\r\n  top<\/span>: 0<\/span>;\r\n  bottom<\/span>: 0<\/span>;\r\n  margin<\/span>: auto<\/span>;\r\n}\r\n<\/pre>\n
G\u00f3rne i dolne w\u0142a\u015bciwo\u015bci ustawione na zero i po\u0142\u0105czone z\u00a0margin: auto;\u00a0<\/code>co pozwala naszym elementom mie\u0107 wy\u015brodkowane poziome po\u0142o\u017cenie.<\/p>\n
Oto jak wygl\u0105daj\u0105 pozosta\u0142e style:<\/p>\n
.container<\/span> span<\/span>.radio<\/span>:hover<\/span> {\r\n  cursor<\/span><\/span>: <\/span>pointer<\/span><\/span>;1<\/span><\/span>\r\n}\r\n.container<\/span> span<\/span>.radio<\/span>::before<\/span> {\r\n  left<\/span>: -52px<\/span><\/span>;\r\n  width<\/span>: 45px<\/span><\/span>;\r\n  height<\/span>: 25px<\/span><\/span>;\r\n  background-color<\/span>: #A8AAC1<\/span>;\r\n  border-radius<\/span>: 50px<\/span><\/span>;\r\n}\r\n.container<\/span> span<\/span>.radio<\/span>::after<\/span> {\r\n  left<\/span>: -49px<\/span><\/span>;\r\n  width<\/span>: 17px<\/span><\/span>;\r\n  height<\/span>: 17px<\/span><\/span>;\r\n  border-radius<\/span>: 10px<\/span><\/span>;\r\n  background-color<\/span>: #6C788A<\/span>;\r\n  transition: left<\/span> .25s<\/span><\/span>, background-color .25s<\/span><\/span>;\r\n}\r\ninput<\/span><\/span>[type=\"radio\"]<\/span>:checked<\/span><\/span> + <\/span>label<\/span><\/span> span<\/span><\/span>.radio<\/span><\/span>::after<\/span><\/span> {\r\n  <\/span>left<\/span><\/span>: <\/span>-27<\/span>px<\/span><\/span><\/span>;\r\n  <\/span>background-color<\/span><\/span>: <\/span>#EBFF43<\/span><\/span>;\r\n}2<\/span><\/span>\r\n<\/pre>\n
Najwa\u017cniejsz\u0105 cz\u0119\u015bci\u0105 jest ostatni zestaw regu\u0142, kt\u00f3ry\u00a0odpowiada za prze\u0142\u0105czenie. Pseudo klasa\u00a0:checked<\/code> pozwala nam wprowadza\u0107 zmiany\u00a0do odznaczonych element\u00f3w. Za pomoc\u0105 selektora \"+\" mo\u017cemy wybra\u0107 nast\u0119pny element i\u00a0wybra\u0107\u00a0span.radio<\/code>, gdzie stosujemy nowe\u00a0regu\u0142y do\u00a0pseudo elementa\u00a0::after<\/code>. W tym przypadku zmieniamy pozycj\u0119 poziom\u0105 i kolor.<\/p>\n
Aby prze\u0142\u0105czenie by\u0142o p\u0142ynne, przypisujemy przej\u015bcie o warto\u015bci 0,25 sekundy do lewej w\u0142a\u015bciwo\u015bci i koloru t\u0142a. Teraz, gdy klikamy przycisk pola wyboru, elementy prze\u0142\u0105czaj\u0105 si\u0119\u00a0p\u0142ynne,\u00a0a nie\u00a0szybko skacz\u0105.<\/p>\n
Pola wyboru (checkboxy)<\/h3>\n
Je\u015bli chcesz stworzy\u0107 niestandardowe pola wyboru, metoda jest taka sama. Sp\u00f3jrz na style:<\/p>\n
.container<\/span> span<\/span>.checkbox<\/span>::before<\/span> {\r\n  width<\/span>: 27px<\/span><\/span>;\r\n  height<\/span>: 27px<\/span><\/span>;\r\n  background-color<\/span>: #fff<\/span>;\r\n  left<\/span>: -35px<\/span><\/span>;\r\n  box-sizing: border-box;\r\n  border<\/span>: 3px<\/span><\/span> solid<\/span> transparent<\/span>;\r\n  transition: border-color .2s<\/span><\/span>;\r\n}\r\n.container<\/span> span<\/span>.checkbox<\/span>:hover<\/span>::before<\/span> {\r\n  border<\/span>: 3px<\/span><\/span> solid<\/span> #F0FF76<\/span>;\r\n}\r\n.container<\/span> span<\/span>.checkbox<\/span>::after<\/span> {\r\n  content<\/span>: '\\f<\/span>00c'<\/span>;\r\n  font-family<\/span>: 'FontAwesome'<\/span>;\r\n  left<\/span>: -31px<\/span><\/span>;\r\n  top<\/span>: 2px<\/span><\/span>;\r\n  color<\/span>: transparent<\/span>;\r\n  transition: color .2s<\/span><\/span>;\r\n}\r\ninput<\/span>[type=\"checkbox\"]:checked<\/span> + label<\/span> span<\/span>.checkbox<\/span>::after<\/span> {\r\n  color<\/span>: #62AFFF<\/span>;\r\n}\r\n<\/pre>\n
Jedyna r\u00f3\u017cnica polega na tym, \u017ce u\u017cywamy ikony z rodziny FontAwesome jako nasz\u00a0pseudo element\u00a0::after<\/code>. Domy\u015blnie jest przezroczysty, ale gdy pole wyboru jest zaznaczone, ikona staje si\u0119 niebieska.<\/p>\n
W dodatku<\/strong><\/p>\n
Je\u015bli chcesz u\u017cy\u0107 ikony FontAwesome w swoim pseudo elemencie, musisz do\u0142\u0105czy\u0107 ich\u00a0kod do w\u0142a\u015bciwo\u015bci content i okre\u015bli\u0107 w\u0142a\u015bciwo\u015b\u0107 font-family jako\u00a0FontAwesome<\/code>. Naprzyk\u0142ad:<\/p>\n
{\r\ncontent<\/span>: '\\f<\/span>00c'<\/span>;\r\nfont-family<\/span>: 'FontAwesome'<\/span>;\r\n}\r\n<\/pre>\n
Kodf00c<\/code> jest poprzedzony uko\u015bnikiem odwrotnym, kt\u00f3ry jest wymagany do unikni\u0119cia znaku Unicode, kt\u00f3ry mo\u017cna znale\u017a\u0107 na stronie wybranej ikony:<\/p>\n
\"A
<\/h3>\n
Ostateczny wynik<\/h3>\n
Stworzyli\u015bmy w pe\u0142ni funkcjonalne i pi\u0119kne\u00a0checkboxy i przyciski opcji, kt\u00f3re mo\u017cesz\u00a0modyfikowa\u0107 i\u00a0wykorzysta\u0107 we w\u0142asnych projekt\u00f3w. Mo\u017cesz zobaczy\u0107 pe\u0142ny kod \u017ar\u00f3d\u0142owy w demo CodePen:<\/p>\n