Accentsconagua
Share
Noen gang lurt på hvordan du stiler avmerkingsbokser og radioknapper, men uten JavaScript? Takket være CSS3 kan du! Her er hva vi skal bygge (Merk: for å lære å gjøre disse tilgjengelige, sjekk ut denne opplæringen også):
Hvis du leter etter noen grafikk som skal brukes med form UI-elementene, ta en titt på UI-kittene som er tilgjengelige fra Envato Elements. Ellers ta en kopp kaffe og kom i gang med denne opplæringen!
Anbefalt lesing: De 30 CSS Selectors du må huske
For de av dere som føler meg selvsikker i dine CSS evner allerede, og bare vil ha en knall i riktig retning, er her den viktigste linjen av CSS i hele opplæringen:
skriv inn [type = "avkrysningsrute"]: merket + etikett
Nå, for de av dere som føler at dere kanskje trenger mer retning, frykt ikke, les videre!
Ok, så tilbake på emnet nå. Hva skal vi gjøre? Vel, på grunn av CSS3s nifty little :sjekket pseudovelger, kan vi målrette mot et element basert på den merkede statusen (eller ukontrollert). Vi kan da bruke + tilstøtende søskenvelger fra CSS2.1 for å målrette elementet direkte etter avkrysningsruten eller radioen, som i vårt tilfelle er etiketten.
Nå starter vi ved å lage våre HTML- og CSS-filer (eller likevel foretrekker du å håndtere stilene dine) og komme på jobb. Jeg antar at du vet hvordan du gjør det, så vi trenger ikke å komme inn på det.
For å få deg på vei, vil jeg kun demonstrere denne teknikken i en avkrysningsboks, men prosessen for radioknapper er identisk og er inkludert i kilden.
Ok, la oss faktisk begynne da skal vi? Vi starter med å lage inncheckningsboksen, etterfulgt av en etikett.
Nå, bare hvis du ikke vet mye om element, må du koble til inngangen og etiketten for at du skal kunne samhandle med inngangen gjennom etiketten. Dette gjøres ved å bruke, for = "" og inntastens ID.
Jeg vil også legge til en innsiden av etiketten, som er mer personlig preferanse enn noe annet, men alt vil bli klart i trinn 3.
Det er her moroa begynner. Første ting vi gjør, som er grunnlaget for denne hele opplæringen, er å skjule den aktuelle avmerkingsboksen.
input [type = "checkbox"] display: none;
Nå som det er gjort, kan vi stile etiketten, men mer spesifikt spekteret inni etiketten. Jeg gjør det på denne måten for å gi meg mer kontroll over den nøyaktige plasseringen av avmerkingsboksen. Uten det ville du sannsynligvis bruke et bakgrunnsbilde i etiketten direkte, og posisjonering kan det bli vanskelig.
input [type = "checkbox"] display: none; input [type = "checkbox"] + etikett spenning display: inline-block; bredde: 19px; høyde: 19px; bakgrunn: url (check_radio_sheet.png) left top no-repeat;
Ok, la meg forklare dette raskt. Først av, legg merke til bakgrunnen. Jeg har et lite spritark for disse, så alt jeg trenger å gjøre er å sette bakgrunnsposisjonen på dette spekteret. Spenningen i seg selv er den eksakte bredden og høyden til hver "sprite" i arket, noe som gjør det enkelt å definere hver stat.
Vårt sprite ark Her er resten av CSS, spesifikk for min styling. Dette er rent for estetikk og spesifikk for enten min smak eller dette designet.
input [type = "checkbox"] display: none; input [type = "checkbox"] + etikett spenning display: inline-block; bredde: 19px; høyde: 19px; margin: -2px 10px 0 0; vertical-align: middle; bakgrunn: url (check_radio_sheet.png) left top no-repeat; Markøren: pekeren;
Det er ikke for mye arbeid igjen, så la oss få dette pakket inn. Det siste du trenger å gjøre er å gi en tilstand for elementet når inngangen er merket, og eventuelt også for på svingeren. Dette er ganske enkelt, bare ta en titt!
input [type = "checkbox"] display: none; input [type = "checkbox"] + etikett spenning display: inline-block; bredde: 19px; høyde: 19px; margin: -2px 10px 0 0; vertical-align: middle; bakgrunn: url (check_radio_sheet.png) left top no-repeat; Markøren: pekeren; input [type = "avkrysningsrute"]: sjekket + etikett span bakgrunn: url (check_radio_sheet.png) -19px topp no-repeat;
Legg merke til at fordi jeg brukte et sprite-ark, er alt jeg trenger å gjøre å endre bakgrunnsposisjonen. Legg også merke til at alt jeg måtte gjøre for å utforme etikettens spenning for når du "merker" en avkrysningsboks / radioknapp, brukte CSS3 :sjekket pseudovelger.
Pseudo-selektorer har god støtte på alle nettlesere, men de vanlige forbeholdene gjelder, og fallbacken er ganske grasiøs:
Kan jeg bruke data for generelle pseudo selektorer
Fallback: IE9 på Windows 7 Tidlige mobile nettlesere er også et problem - støtte til :sjekket er uklart. Mobile Safari før iOS 6 ikke støtte det, for eksempel.
OK, så er vi ferdige, ikke sant? Vel, la oss bare dobbeltsjekke. Først HTML:
Ser du det samme ut? Ikke glem å legge til det ! Når du eksperimenterer med dette alene, foreslår jeg sterkt å finne nye eller forskjellige måter å gjøre denne delen på. Jeg vil gjerne se hva du gjør med å gjøre det mer effektivt. Nå for CSS:
input [type = "checkbox"] display: none; input [type = "checkbox"] + etikett spenning display: inline-block; bredde: 19px; høyde: 19px; margin: -2px 10px 0 0; vertical-align: middle; bakgrunn: url (check_radio_sheet.png) left top no-repeat; Markøren: pekeren; input [type = "avkrysningsrute"]: sjekket + etikett span bakgrunn: url (check_radio_sheet.png) -19px topp no-repeat;
Alt til stede? Perfekt. Husk at mye av denne stylingen er spesifikk for stilen jeg opprettet for demo-filene. Jeg oppfordrer deg til å lage din egen, og eksperimentere med plassering og presentasjon.
Til slutt, det viktigste du kan bære vekk fra dette er den aller første linjen i CSS jeg skrev helt opp:
skriv inn [type = "avkrysningsrute"]: merket + etikett
Ved å bruke det, kan du lage en hel rekke forskjellige ting. Mulighetene med :sjekket gå utover boksene og radioene for bruk i skjemaer, men jeg lar deg eksperimentere med det selv. Noen ting å eksperimentere med:
Jeg håper du likte denne korte artikkelen, og jeg håper du tar det du ser her og utvider eller forbedrer det!
For å fullføre, har vi bygget en komplett guide for å hjelpe deg med å lære CSS, enten du bare har begynt med det grunnleggende eller du vil utforske mer avanserte CSS.
