CSS formular

Med CSS kan du betydeligt forbedre udseendet af HTML-formularer:

Prøv det selv

sæt inputfeltets stil

brug width egenskab for at bestemme inputfeltets bredde:

eksempel

input {
  width: 100%;
}

Prøv det selv

Eksemplet gælder for alle <input>-elementer. Hvis du kun vil sætte stilen til en bestemt inputtype, kan du bruge en egenskabsvælger:

  • input[type=text] - Vælg kun tekstfelter
  • input[type=password] - Vælg kun adgangskodefelter
  • input[type=number] - Vælg kun numeriske felter
  • osv...

fyld inputfeltet

brug padding egenskab tilføjer plads inden for tekstfeltet.

Bemærk:Hvis der er mange input, kan du muligvis også tilføje ekstra margin for at tilføje mere plads uden for dem:

eksempel

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}

Prøv det selv

Bemærk, at vi har sat box-sizing egenskab er sat til border-boxså er det sikret, at elementets samlede bredde og højde inkluderer indrykning (fyld) og den endelige kant.

Ved at bruge vores CSS Box Sizing i dette kapitel lærer du om box-sizing læs mere om egenskaben.

inputfelter med kant

Brug border egenskab for at ændre kantens tykkelse og farve, og brug border-radius egenskab for at tilføje runde kanter:

eksempel

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

Prøv det selv

Hvis du kun har brug for en bund kant, brug border-bottom Egenskab:

eksempel

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Prøv det selv

farvede inputfelter

Brug background-color egenskab for at tilføje en baggrundsfarve til input, og brug color egenskab for at ændre tekstfarven:

eksempel

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

Prøv det selv

inputfeltet der får fokus

Som standard tilføjer nogle browsere en blå kontur omkring inputfeltet, når det får fokus (klik). Du kan undgå dette ved at tilføje outline: none; for at fjerne dette opførsel.

brug :focus Vælgere kan få en stil, når de får fokus i en inputfelt:

Eksempel 1

input[type=text]:focus {
  background-color: lightblue;
}

klik i tekstfeltet:

Prøv det selv

Eksempel 2

input[type=text]:focus {
  border: 3px solid #555;
}

klik i tekstfeltet:

Prøv det selv

inputfelter med ikon/billede

hvis du ønsker at inkludere et ikon i inputfeltet, brug background-image egenskaben og kombiner den med background-position egenskaberne sammen. Bemærk også, at vi har tilføjet en større venstre indre kant (padding-left) for at lade plads til ikonet:

eksempel

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding-left: 40px;
}

Prøv det selv

animeret søgefelt

i dette eksempel bruger vi CSS transition egenskaben sætter animation for bredden af søgefeltet, når det får fokus. Senere vil du i vores CSS overgange i dette kapitel lærer du mere om transition viden om egenskaben.

eksempel

input[type=text] {
  transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
  width: 100%;
}

Prøv det selv

angiv stilen for tekstdome

Bemærk:brug resize egenskaben kan forhindre justering af textareas (deaktiverer 'grip' i nederste højre hjørne):

eksempel

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

Prøv det selv

angiv stilen for valgsmenuen

eksempel

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}

Prøv det selv

angiv inputknappens stil

eksempel

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Tip: Brug width: 100%, for at opnå fuld bredde knapper */

Prøv det selv

For mere viden om, hvordan man bruger CSS til at sætte knapstil, skal du lære vores CSS knapper Tutorial.

Responsivt menu

Juster størrelsen på TIY redigeringsvinduet for at se effekten. Når skærmens bredde er mindre end 600 pixels, skal de to kolonner placeres lodret i stedet for vandret.

Avanceret: Næste eksempel bruger Medieforespørgsler For at oprette et responsivt formulær. I det næste kapitel vil du lære mere om dette emne.

Se responsivt menu