Css dynamisk endringsskjema. Hvordan - CSS-tips - Endre utseendet til skjemaelementer ved hjelp av CSS
Uten overlappende stilark vil skjemaelementer gjengis i henhold til nettleserens og operativsystemets standardinnstillinger. Ved å bruke CSS kan du imidlertid lage skjemaer som samsvarer med nettstedets design.
Løsning
Et skjemaelement, som alle andre HTML-elementer, kan styles ved hjelp av CSS.
Ris. 6.1. Standard skjemavisning i Firefoxi-nettleseren
Avbildet på ris. 6.1 Skjemaet er utformet i samsvar med standardinnstillingene som brukes av Firefox-nettleseren under Windows XP. Utseendet vil endre seg når det vises i forskjellige nettlesere under forskjellige plattformer. Nedenfor er en typisk form:
"http://www.w3.org/1999/xhtml" lang = "en-US" >
Du kan endre utseendet til dette skjemaet ved å skrive stylingregler for elementene:
form ( kantlinje: 1px prikket #AAAAAA ; polstring: 0 .5em ; ) form div ( margin-bunn: 1em ; ) input ( farge: #00008B ; bakgrunnsfarge: #ADD8E6 ; kantlinje: 1px solid #00008B ; ) velg ( bredde: 100px farge: #00008B ;
Nå ser formen ut som i fig. 6.2.
Diskusjon
Som du sikkert har gjettet, gitt stilregler for HTML-elementer form, input, tekstområde og velg vil bli brukt på hver forekomst av dem på siden som stilarkfilen er knyttet til. Du kan bruke mange forskjellige egenskaper for å endre utseendet til skjemafelt. Du kan kontrollere nesten alle aspekter av feltet ved å bruke CSS
:
Råd
Former og bakgrunnsfarge. Noen besøkende på nettstedet ditt kan ha problemer med å skille farger, mens andre kan bruke en stemmeleser. Derfor bør farger aldri utføre viktige funksjoner - for eksempel bør instruksjoner som "Gule felt er obligatoriske" være fullstendig forbudt.
La oss se på eiendomsverdiene mer detaljert:
Når de la ut neste prosjekt (eller bare designet et layoutrutenett), sto mange overfor et dilemma - å bruke en fast layoutbredde eller et "gummi"-rutenett som tilpasser seg størrelsen på nettleservinduet.
Hver av disse løsningene har sine egne fordeler og ulemper. Jeg ønsker å fokusere på minusene, siden man vanligvis må velge mellom to onder.
Fast layout rutenettbredde
Layouten er tvunget inn i en horisontal dimensjon på 960-980 piksler (slik at alt er inkludert på de fleste enheter i de fleste oppløsninger), som med store horisontale vindusstørrelser ser kjølig ut på en eller annen måte - en tynn vertikal stripe med nyttig sideinnhold og enorme ubrukelige felt med ubrukt plass på sidene."Gummi" layout rutenett over bredden av vinduet
Igjen, med store horisontale vindusstørrelser, er det et annet problem: tekstlinjene blir veldig lange, og å lese dem blir slett ikke så behagelig som vi ønsker.Et annet vanlig problem med denne løsningen er at sidemarginene med store horisontale vindusstørrelser ikke lenger er visuelt konsistente med de horisontale dimensjonene til elementene, noe som heller ikke gir komfort når man ser på layouten.
Jeg vil gjerne foreslå en enkel løsning - begrense den minste horisontale størrelsen til en fast verdi i piksler, og gjør den maksimale relative som en prosentandel av vindusbredden. Dette er svært trivielt løst ved hjelp av 2 flere versjoner av CSS-spesifikasjonen.
Oppdater: Jeg vil ta forbehold om at vi ikke snakker om den klassiske gummieffekten og tilpasning til absolutt alle oppløsninger, men heller kun om et visst rimelig utvalg av oppløsninger som oppsettet er designet for. I eksemplene nedenfor er dette det klassiske skrivebordsoppløsningsområdet med en horisontal oppløsningsstørrelse på 1024 piksler.La meg understreke igjen: Innlegget snakker ikke om en løsning for alle typer enheter og alle oppløsningsområder. Dette problemet kan i prinsippet ikke løses innenfor rammen av én layout., for å løse det på en eller annen måte vil det kreve flere oppsett. Fluer hver for seg, koteletter hver for seg.
Lag en layoutbeholder:
...
Vi dekorerer den med enkel stilkode:
div.page-container (min-bredde: 960px; maks-bredde: 75 %; margin: 0 auto; utfylling: 0; )
Denne løsningen kan imidlertid virke utilstrekkelig for noen på grunn av at det med svært store horisontale vindusstørrelser igjen oppstår problemer med linjelengder. Dette kan løses med en like enkel tilleggsteknikk: å lage en ekstra ytre beholder inne i den som allerede er beskrevet og begrense dens maksimale bredde til en fast verdi (subjektivt ser det ut til at verdier i området 1400-1600 piksler er best egnet). Igjen, vi bruker bare CSS 2.0-verktøy. Denne løsningen, i stedet for bare å legge til bredden som en prosentandel for den originale beholderen som foreslått i den første kommentaren, vil også fungere i IE, som frem til versjon 9 ikke forstår samtidig indikasjon av verdier.
Legger til HTML:
Og endre CSS litt:
div.page-container ( max-width: 75 %; min-width: 960px; margin: 0 auto; padding: 0; ) div.page-container-inner ( min-width: 960px; max-width: 1600px; margin : 0 auto; utfylling: 0;
Som du kan se, er løsningen ekstremt enkel og ganske universell, den kan brukes til alle blokkelementer.
Utseendet til et HTML-skjema kan forbedres betydelig ved å bruke CSS:
Inndatafeltstiler
Bruk width-egenskapen for å bestemme bredden på inndatafeltet:
Eksempel gjelder alle elementer . Hvis du bare vil style en spesifikk inndatatype, kan du bruke attributtvelgere:
- input - kun tekstfelt vil bli valgt
- input - bare passordfelt vil bli valgt
- input - kun numeriske felt vil bli valgt
- etc...
Ytterligere innganger
Bruk utfyllingsegenskapen for å legge til plass i et tekstfelt.
Råd: Hvis du har mange innganger ved siden av hverandre, kan du også legge til en marg for å gi mer plass ute:
Merk at vi har satt egenskapen boksstørrelse til border-box . Dette sikrer at den eventuelle kantpolstringen er inkludert i den totale bredden og høyden på elementene.
Les mer om egenskapen for boksstørrelse i kapittelet CSS-boksestiler.
Inndatagrenser
Bruk kantegenskapen for å endre størrelsen og fargen på kantlinjen, og egenskapen kantradius for å legge til avrundede hjørner:
Hvis du bare trenger en bunnkant, bruk egenskapen border-bottom:
Inndatafarge
Bruk bakgrunnsfargeegenskapen til å fargelegge bakgrunnen, fargeegenskapen for å legge til en tekstfargeendring:
Input fokus
Som standard legger noen nettlesere til en blå kontur rundt en inngang når den mottar fokus (museklikk). Denne atferden kan fjernes ved å legge til disposisjon: ingen; i input.
Bruk selector:focus for å få inndatafeltet til å motta fokus:
Inndataikon og bilde
Hvis du vil sette et ikon inne i en inngang, bruk egenskapen bakgrunnsbilde og plasser den i egenskapen bakgrunnsposisjon. Vær også oppmerksom på at vi har lagt til en stor venstre polstring for å reservere plass til ikonet:
Eksempel
input(
bakgrunnsfarge: hvit;
bakgrunnsbilde: url("searchicon.png");
bakgrunnsposisjon: 10px 10px;
bakgrunn-gjenta: ikke-gjenta;
polstring-venstre: 40px;
}
Input søketransformasjon
I dette eksemplet bruker vi CSS-overgangsegenskapen til å animere bredden på søkeinndata når den får fokus. Du vil lære mer om overgangsegenskaper senere i kapittelet vårt