Style Forms amin'ny CSS

Mianara hanatsara ny endrik'ilay tranonkala

Ny fianarana fomba fomba fanao miaraka amin'ny CSS dia fomba lehibe hanatsarana ny fijerin'ny tranonkala. Ny endrika HTML dia anisan'ny zavatra mahatsiravina indrindra amin'ny ankamaroan'ny tranonkala. Matetika izy ireo dia mendri-piderana sy mampiasa zava-mahadomelina ary tsy manome fomba betsaka amin'ny fomba.

Miaraka amin'ny CSS, afaka miova izany. Ny fampifandraisana ny CSS amin'ny endri-tsoratra matihanina kokoa dia afaka manolotra endrika tsara tarehy.

Hanova ny lokony

Tahaka ny amin'ny lahatsoratra, azonao atao ny manova ny lamin'ny endrika sy ny loko ao amin'ny endriky ny endrika.

Ny fomba mora hanovana ny loko afara eo amin'ny tarehin'ny singa rehetra dia ny fampiasana ny loko-loko eo afovoan'ny sehatra. Ohatra, ity code ity dia mampihena loko manga manga (# 9cf) amin'ny singa rehetra.

input {
background-color: # 9cf;
loko: # 000;
}

Raha hanova ny loko afara amin'ny endritsoratra sasantsasany, ampidiro fotsiny ny textarea ary mifidiana amin'ny fomba. Ohatra:

input, textarea, mifidy {
background-color: # 9cf;
loko: # 000;
}

Azonao atao ny manova ny loko ifantohanao raha toa ka mamirapiratra ny loko misy anao. Ny loko mifanandrify dia manampy amin'ny fanesorana kokoa ny singan'ny endrika. Ohatra, ny loko amin'ny loko miloko maivana maivana dia mora vakina raha fotsy ny loko. Ohatra, ity lahatsary ity dia mametraka fotsy fotsy amin'ny loharano mena.

input, textarea, mifidy {
background-color: # c00;
loko: #fff;
}

Azonao atao aza ny mametraka loko ao amin'ny endri-tsoratry ny tenanao. Tsarovy fa ny endriky ny endrika dia singa iray block , noho izany dia mameno ny loko eo amin'ny sehatra iray manontolo, fa tsy ny toerana misy ireo singa.

Azonao atao ny manampy tranainy mavomavo amin'ny singa iray fanakanana mba hahatonga ny faritra hipoitra, tahaka ity:

form {
background-color: #ffc;
}

Add Borders

Tahaka ny loko, azonao atao ny manova ny sisintany amin'ny endrika samihafa. Azonao atao ny manisy sisin-tany tokana amin'ny endrika iray manontolo. Aoka ho azo antoka fa ampiana fanesorana, na ny singan-tsavoka ho anao dia hikorontana eo akaikin'ny sisintany.

Ity misy ohatra iray momba ny code iray ho an'ny sisin-doko mainty 1-pixel ahitana 5 pikselan'ny fametahana:

form {
border: 1px solid # 000;
padding: 5px;
}

Azonao atao ny manisy sisin-tany manodidina ny endriny. Manova ny sisin-dalan'ny zavatra entina hanamboarana azy ireo:

input {
border: 2px dashed # c00;
}

Mitandrema rehefa mametraka sisintany eo amin'ny boaty misy rindrina ianao raha toa ka tsy dia mijery toy ny boaty doka izy ireo, ary ny olona sasany mety tsy mahatsapa fa afaka mameno ny endrika.

Asio endri-javatra

Amin'ny fametrahana ny endriky ny endriny miaraka amin'ny eritreritra sy ny CSS, dia afaka mametraka endrika tsara tarehy ianao izay manampy amin'ny famolavolana sy ny fametrahana ny tranokalanao.