CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS- vorms


Die voorkoms van 'n HTML-vorm kan aansienlik verbeter word met CSS:


Stileer invoervelde

Gebruik die widtheienskap om die breedte van die invoerveld te bepaal:

Voorbeeld

input {
  width: 100%;
}

Die voorbeeld hierbo is van toepassing op alle <invoer>-elemente. As jy net 'n spesifieke invoertipe wil stileer, kan jy kenmerkkiesers gebruik:

  • input[type=text]- sal slegs teksvelde kies
  • input[type=password]- sal slegs wagwoordvelde kies
  • input[type=number]- sal slegs nommervelde kies
  • ens.


Opgevulde insette

Gebruik die paddingeiendom om spasie binne die teksveld by te voeg.

Wenk: Wanneer jy baie invoere na mekaar het, wil jy dalk ook 'n paar marginbyvoeg om meer spasie daarbuite by te voeg:

Voorbeeld

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

Let daarop dat ons die box-sizingeiendom op gestel het border-box. Dit maak seker dat die vulling en uiteindelik grense by die totale breedte en hoogte van die elemente ingesluit word.
Lees meer oor die box-sizingeiendom in ons CSS Box Sizing- hoofstuk.


Begrensde insette

Gebruik die bordereienskap om die randgrootte en kleur te verander, en gebruik die border-radiuseienskap om afgeronde hoeke by te voeg:

Voorbeeld

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

As jy net 'n onderste rand wil hê, gebruik die border-bottomeiendom:

Voorbeeld

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

Gekleurde insette

Gebruik die background-coloreiendom om 'n agtergrondkleur by die invoer te voeg, en die coloreiendom om die tekskleur te verander:

Voorbeeld

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

Gefokusde insette

By verstek sal sommige blaaiers 'n blou buitelyn rondom die invoer byvoeg wanneer dit gefokus word (op geklik). Jy kan hierdie gedrag verwyder deur by outline: none;die invoer by te voeg.

Gebruik die :focuskieser om iets met die invoerveld te doen wanneer dit fokus kry:

Voorbeeld

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

Voorbeeld

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

Invoer met ikoon/beeld

As jy 'n ikoon binne die invoer wil hê, gebruik die background-imageeiendom en plaas dit saam met die background-positioneiendom. Let ook op dat ons 'n groot linkeropvulling byvoeg om die spasie van die ikoon te behou:

Voorbeeld

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

Geanimeerde soekinvoer

In hierdie voorbeeld gebruik ons ​​die CSS transition-eienskap om die breedte van die soekinvoer te animeer wanneer dit fokus kry. Jy sal later meer oor die transitioneiendom leer, in ons CSS Transitions- hoofstuk.

Voorbeeld

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

input[type=text]:focus {
  width: 100%;
}

Stileer teksareas

Wenk: Gebruik die resizeeienskap om te verhoed dat die grootte van teksareas verander word (deaktiveer die "grabber" in die onderste regterhoek):

Voorbeeld

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

Stilering Kies spyskaarte

Voorbeeld

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

Stilering-invoerknoppies

Voorbeeld

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: use width: 100% for full-width buttons */

Vir meer inligting oor hoe om knoppies met CSS te styl, lees ons CSS Buttons Tutoriaal .


Responsiewe vorm

Verander die grootte van die blaaiervenster om die effek te sien. Wanneer die skerm minder as 600px wyd is, laat die twee kolomme bo-op mekaar stapel in plaas van langs mekaar.

Gevorderd: Die volgende voorbeeld gebruik medianavrae om 'n responsiewe vorm te skep. Jy sal meer hieroor leer in 'n latere hoofstuk.