CSS lomakkeet

CSS:n avulla voidaan merkittävästi parantaa HTML-lomakkeiden ulkoasua:

Kokeile itse

Aseta syöttökentän tyyli

Käytä width ominaisuus määrittää syöttökentän leveyden:

Esimerkki

input {
  width: 100%;
}

Kokeile itse

Edellä oleva esimerkki pätee kaikkiin <input>-elementteihin. Jos haluat asettaa tyylin vain tiettyyn syöttötyyppiin, voit käyttää ominaisuusvalitsinta:

  • input[type=text] - Valitaan vain tekstit
  • input[type=password] - Valitaan vain salasanoakentät
  • input[type=number] - Valitaan vain numerokentät
  • ja niin edelleen...

täyttää syöttökenttä

Käytä padding ominaisuus lisää tilaa tekstikenttiin.

Vinkki:Jos sinulla on paljon syöttökenttiä, saattaa olla tarpeen lisätä ulkoreunus, jotta voit lisätä enemmän tilaa niiden ulkopuolelle:

Esimerkki

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

Kokeile itse

Huomaa, että olemme asettaneet box-sizing ominaisuus asetetaan border-boxniiden kokonaisleveys ja korkeus sisältävät sisennykset ( täyttö) ja lopulliset reunat.

Varmista, että CSS Box Sizing Tässä luvussa voit oppia box-sizing ominaisuuksista lisätietoja.

reunallisella syöttökentällä

Käytä border ominaisuus muuttaa reunan paksuutta ja väriä, ja käytä border-radius ominaisuus lisää pyöristetyt kulmat:

Esimerkki

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

Kokeile itse

Jos tarvitset vain alapuolisen reunan, käytä border-bottom Ominaisuus:

Esimerkki

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

Kokeile itse

värikäs syöttökenttä

Käytä background-color ominaisuus lisää syöttökenttään taustavärin ja käytä color ominaisuus muuttaa tekstin väriä:

Esimerkki

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

Kokeile itse

keskittyvä syöttökenttä

Oletuksena jotkut selaimet lisäävät sinisen reunan ympärille syöttökenttään, kun ne saavat keskittyvyyden (napsautus). Voit estää tämän lisäämällä outline: none; poista tämä käyttäytyminen.

Käytä :focus Valitsin voi asettaa tyylin, kun syöttökenttä saa keskittyvyyden:

Esimerkki 1

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

Napsauta tekstikenttää:

Kokeile itse

Esimerkki 2

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

Napsauta tekstikenttää:

Kokeile itse

kuvakkeella/pixellillä varustettu hakukenttä

Jos haluat sisällyttää kuvakkeen hakukenttään, käytä background-image ominaisuus ja yhdistimme sen background-position ominaisuuksia yhdessä asettamalla. Huomaa myös, että lisäsimme suuremman vasemman sisäisen reunan (padding-left) kuvakkeen tilan varalta:

Esimerkki

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

Kokeile itse

animaatioon varustettu hakukenttä

Tässä esimerkissä käytämme CSS transition ominaisuudesta, joka asettaa animaation hakukentän leveydelle, kun se saa kohdistuksen. Myöhemmin opit meidän CSS siirtymät opit tässä luvussa lisää transition ominaisuuksien tietoa.

Esimerkki

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

Kokeile itse

Aseta tekstikentän tyyli

Vinkki:Käytä resize Ominaisuus estää textarea-koon säätämisen (poista oikean alakulman 'lapinimi'):

Esimerkki

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

Kokeile itse

Aseta valintavalikon tyyli

Esimerkki

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

Kokeile itse

Aseta syötteen painikkeen tyyli

Esimerkki

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;
}
/* Vinkki: Käytä width: 100%, jotta painike on täysin leveä */

Kokeile itse

Lisätietoja CSS-painikkeiden tyyleistä, katso CSS painikkeet Ohjeet.

Responsiivinen valikko

Aseta TIY editorin ikkunan koko muuttamaan näkyvyyttä. Kun näytön leveys on alle 600 pikseliä, aseta kaksi saraketta ylöspäin sijoitettuina eikä sivuttaista.

Edistynyt: Seuraavissa esimerkeissä käytetään Media-tarkistukset Luo responsiivinen lomake. Seuraavassa luvussa opit lisää tietoa.

Näytä responsiivinen valikko