Madaliang Paalala: Walang hirap na CSS3 Checkboxes at Radio Buttons

() translation by (you can also view the original English article)

Sinubukan mo na bang alamin kung paano baguhin ang istilo ng mga checkbox at radio buttons ng hindi gumagamit ng JavaScript? Salamat sa CSS3, kaya mo na itong gawin! Ito ang bubuuin natin:

Kung naghahanap ka ng mga graphics na gagamitin sa iyong form UI elements, subukan mong tignan ang mga UI kits na pwede mong gamiting mula sa Envato Elements. Kung hindi naman, magtimpla ka ng kape at simulan na natin ang panutong ito!

1. Pagunawa sa Pamamaraan

Maipapayong Basahin: Ang 30 CSS Selectors na Kailangan mong Tandaan

Para sa inyong malaki ang tiwala sa sariling kakayahan sa CSS at kailangan lang maituro sa tamang direksyon, ito ang pinakaimportanteng linya sa kabuuan ng pagtuturong ito:

1	input[type="checkbox"]:checked + label {
2
3	}

Ngayon, para sa inyong nangangailangan pa ng higit na paggabay, wag matakot! Sulong lang sa pagbabasa!

Oh sige, balik sa usapan. Ano nga ba ang eksaktong gagawin natin? Mabuti na lang, dahil sa maasahang :checked pseudo selector ng CSS3, kaya nating piliin ang isang element base sa markado (o hindi markado) nitong istado. Pwede natin gamitin ang + adjacent sibling selector mula sa CSS2.1 para patamaan and element na tuwirang sumusunod sa checkbox o radio, kung saan sa pagkakataon na ito ay ang label.

2. Pagsisimula ng ating HTML

Ngayon, sisimulan natin sa pamamagitan ng pagbuo ng HTML at CCS na file (o gayunman sa paraang iyong nais) at simulan na ang trabaho. Aking pinapalagay na alam mo na kung paano iyon gawin, kaya hindi na natin kailangan talakayin.

Para masimulan mo na ang paggawa, ipapakita ko lamang ang pamamaraan na ito sa isang checkbox. Gayunpaman, ang paraan para sa radio buttons ay kapareho lamang, at kasama na sa source.

Ayos! maaari na talaga tayong magsimula, hindi ba? Sisimulan natin sa paggawa ng ating checkbox input, susundan ng isang label.

1	<input type="checkbox" />
2	<label>Styled Check Box</label>

Ngayon, kung sakaling wala ka pang gaanong alam tungkol sa <label> element, kailangan mong pagdugtungin ang input ant ang label para maaari mong mabago ang input sa pamamagitan ng label.

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1">Check Box 1</label>

Magdadagdag rin ako ng isang <span> sa loob ng label, na tipo ko lang gamitin. Magiging malinaw ang dahilan ng paggamit ko dito sa step 3.

3. Ang Dahilan ng Ating Pagparito: CSS

Dito magsisimula ang kasiyahan. Ang una nating gagawin, ang pinakapaksa ng pagtuturong ito, ay itago ang tunay na checkbox.

1	input[type="checkbox"] {
2	display:none;
3	}

Ngayong tapos na ang hakbang na iyon, pupuwede na nating palitan ang istilo ng label, higit lalo ang span sa loob ng isang label. Ganito ang ginagawa ko para magkaroon ako ng mas malaking pamamahala sa eksaktong posisyon ng checkbox. Kung wala ito, malamang ay gagamit ka ng isang background image sa label ng tuwiran, at ang pagaangkop ng posisyon nito ay magiging mahirap.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    background:url(check_radio_sheet.png) left top no-repeat;
}

Sige, hayaan mong ipaliwanag ko ito ng mas maayos. Una, tignan mo ang background. Mayroon akong maliit na sprite sheet para sa mga ito, kaya ang gagawin ko lamang ay itakda ang posisyon sa background ng span na ito. Ang span mismo ang eksaktong taas at lapad ng bawat isang "sprite" sa sheet, kaya naman mas madali nang magtakda ng bawat isang estado.

Our sprite sheet — Ang ating sprite sheet.

Ito na ang kabuuan ng CSS, na naka-istilo sa paraang gusto ko. Ito ay para sa estetiko lamang at partikular sa aking panlasa o sa ganitong disenyo.

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}

4. Pagpapagana Rito

Wala na gaanong trabahong kailangang gawin, kaya naman ibuod na natin ito. Ang huling bagay na kailangan mong gawin ay magbigay ng isang estado para sa element kapag ito ay minarkahan, at pwede ring maglagay para sa hover. Simple lamang itong gawin, tignan nyo!

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Pansinin niyong dahil gumamit ako ng sprite sheet, ang kailangan ko lang gawin ay baguhin ang position ng background. Pansinin nyo rin, na ang kailangan ko lang gawin ay baguhin ang istilo ng span ng label kapag minarkahan ang isang checkbox/radio button, ay baguhin ang CSS3 :checked pseudo selector.

Maikling tala ukol sa suporta ng Browser

Ang mga pseudo selector ay may malawak na supporta sa lahat ng browser, ngunit ang mga kadalasang limitasyon ay sinusunod pa rin dito, at ang mga pamalit ay tunay na kaaya-aya:

Can I use data for pseudo selectors — Maari ba akong gumamit ng datos para sa karamihan ng pseudo selectors

IE9 on Windows 7 — Pamalit: IE9 sa Windows 7

Ang mga lumang mobile browser ay isa ring sulitanin - ang suporta para sa :checked ay hindi malinaw. Halimbawa, ang Mobile Safari bago ang iOS 6 ay hindi ito suportado.

Katapusan

Ayan, tapos na tayo hindi ba? I-double check muna natin ang ating gawa. Una, ang HTML:

1	<input type="checkbox" id="c1" name="cc" />
2	<label for="c1"><span></span>Check Box 1</label>

Pareho ba ang itsura ng sa iyo? Huwag kalimutang idagdag ang <span>! Kapag nageeksperimento dito sarili nyong proyekto, minumungkahi kong maghanap ng mga bago o kakaibang paraan para gawin ang hakbang na ito. Ikalulugod kong makita ung ano pang maiisip nyong paraan para maging mas masinop dito. Ngayon, para sa CSS naman:

input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label span {
    display:inline-block;
    width:19px;
    height:19px;
    margin:-2px 10px 0 0;
    vertical-align:middle;
    background:url(check_radio_sheet.png) left top no-repeat;
    cursor:pointer;
}
input[type="checkbox"]:checked + label span {
    background:url(check_radio_sheet.png) -19px top no-repeat;
}

Nandiyan ba lahat? Mahusay. Tandaan na karamihan sa mga istilo dito ay katutubo sa istilong ginawa ko para sa mga demo file. Inaanyayahan ko kayong gumawa ng sarili nyo, at subukin kung papaanong paraan pa ang pewede sa paglulugar at presentasyon nito.

Sa huli, ang pinakaimportanteng bagay na makukuha mula sa pinakaunang linya ng CSS ay sinulat ko sa pinakataas na bahagi:

1	input[type="checkbox"]:checked + label {
2
3	}

Gamit ito, maari kang gumawa ng isang kabuuang pamamaraan ng iba-ibang mga bagay. Ang mga posibilidad gamit ang :checked ay hindi lamang sa mga checkbox at radios na ginagamit sa forms, ngunit hahayaan ko kayong matuklasan ito sa sarili nyo. Ilan sa mga maari ninyong pageksperimentuhan:

Magdagdag ng 2x spritesheet para sa mga retina screens
Gumamit ng SVG sa halip na isang bitmap.

Sana ay nalibang kayo sa maikling artilulo na ito at sana ay makuha nyo ang mga nakita nyo rito at pagbutihin pa ito at pagandahin!