CSS-formulär

Genom att använda CSS kan du betydligt förbättra utseendet på HTML-formulär:

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

ställa in stil för inmatningsfältet

Använd width egenskap för att bestämma inmatningsfältets bredd:

Exempel

input {
  width: 100%;
cursor: pointer;

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

Det föregående exemplet gäller alla <input>-element. Om du bara vill ställa in stil för specifika inmatningstyper kan du använda egenskapsselektorer:

  • input[type=text] - Väljer endast textfält
  • input[type=password] - Väljer endast lösenordsfält
  • input[type=number] - Väljer endast numeriska fält
  • och så vidare...

fylla inmatningsrutan

Använd padding egenskap för att lägga till utrymme inom textfältet.

Tips:Om det finns många inmatningar, kanske du också behöver lägga till marginaler för att lägga till mer utrymme utanför dem:

Exempel

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

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

Observera att vi har satt box-sizing egenskapen sätts till border-boxSå kan du säkerställa att elementets totala bredd och höjd inkluderar inre marginaler (fyllning) och den slutliga kanten.

Vänligen använd vår CSS Box Sizing i detta kapitel lär du dig om box-sizing mer information om egenskapen.

inmatningsrutor med kant

Använd border egenskap för att ändra kantens tjocklek och färg, och använda border-radius egenskap för att lägga till rundhörningar:

Exempel

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

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

Om du bara behöver en nedre kant, använd border-bottom Egenskap:

Exempel

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

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

färgade inmatningsrutor

Använd background-color egenskap för att lägga till bakgrundsfärg till inmatningen och använda color egenskap för att ändra textfärg:

Exempel

input[type=text] {
  background-color: #3CBC8D;
  border: none;
cursor: pointer;

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

inmatningsfältet som får fokus

Som standard lägger vissa webbläsare en blå kontur runt inmatningsrutan när den får fokus (klick). Du kan undvika detta genom att lägga till outline: none; för att eliminera detta beteende.

Använd :focus Väljare kan ställa in stil för inmatningsfältet när det får fokus:

Exempel 1

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

Klicka i textfältet:

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

Exempel 2

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

Klicka i textfältet:

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

inmatningsfält med ikon/bild

Om du vill lägga till en ikon i inmatningsfältet, använd background-image egenskapen och kombinera den med background-position egenskapen tillsammans med.

Exempel

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

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

animerade sökfält

I detta exempel använder vi CSS transition egenskapen för att sätta animation för breddändring när sökfältet får fokus. Senare kommer du att lära dig mer om CSS过渡 kan lära dig mer om transition kunskap om egenskapen.

Exempel

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

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

Ställ in stilen för textområden

Tips:Använd resize Egenskapen kan förhindra att textområden justeras i storlek (inaktiverar 'gräpparen' i nederkanten):

Exempel

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

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

Ställ in stilen för valmenyn

Exempel

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

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

Ställ in stilen för inmatningsknappar

Exempel

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
cursor: pointer;
}

/* Tips: Använd width: 100%, för att uppnå full bredd på knappen */

Prova själv CSS knappar Lär dig mer om hur du använder CSS för att ställa in knapptyper.

Responsivt meny

Justera storleken på TIY-redigeringsfönstret för att se effekten. När skärmens bredd är mindre än 600 pixlar, låt två kolumner staplas vertikalt istället för horisontellt.

Avancerat: Nästa exempel använder Mediafrågor Skapa responsiva formulär. I nästa kapitel kommer du att lära dig mer om detta.

Visa responsivt meny