Alamin ang Pagbutihin ng Hanapin sa Iyong Website
Ang pag-aaral kung paano mag-estilo ng mga form sa CSS ay isang mahusay na paraan upang mapabuti ang hitsura ng iyong website. Ang mga form sa HTML ay maaaring arguably kabilang sa mga ugliest bagay sa karamihan sa mga pahina ng web. Ang mga ito ay madalas na mayamot at mapag-utusan at hindi nag-aalok ng magkano sa paraan ng estilo.
Sa CSS, na maaaring magbago. Ang pagsasama-sama ng CSS sa mas advanced na mga tag ng form ay maaaring maghatid ng ilang magagandang anyo.
Baguhin ang Mga Kulay
Tulad ng sa teksto, maaari mong baguhin ang mga kulay ng background at background ng mga elemento ng form.
Ang isang madaling paraan upang baguhin ang kulay ng background ng halos bawat elemento ng form ay ang paggamit ng property na kulay sa background sa tag ng input. Halimbawa, ang code na ito ay naglalapat ng kulay asul na background (# 9cf) sa lahat ng mga elemento.
input {
background-color: # 9cf;
kulay: # 000;
}
Upang baguhin ang kulay ng background ng ilang mga elemento lamang ng form, idagdag lamang ang textarea at piliin ang estilo. Halimbawa:
input, textarea, piliin ang {
background-color: # 9cf;
kulay: # 000;
}
Siguraduhing baguhin ang kulay ng teksto kung madilim mo ang kulay ng iyong background. Ang magkakaibang mga kulay ay tumutulong na gawing mas nababasa ang mga elemento ng form. Halimbawa, ang teksto sa isang madilim na pulang kulay ng background ay mas madaling basahin kung ang kulay ng teksto ay puti. Halimbawa, ang code na ito ay naglalagay ng puting teksto sa isang pulang background.
input, textarea, piliin ang {
background-color: # c00;
kulay: #fff;
}
Maaari ka ring maglagay ng kulay ng background sa tag ng form mismo. Tandaan na ang form na tag ay isang elemento ng block , kaya ang kulay ay pumupuno sa buong rektanggulo, hindi lamang ang mga lokasyon ng mga elemento.
Maaari kang magdagdag ng isang kulay-dilaw na background sa isang bloke ng elemento upang mapalawak ang lugar, tulad nito:
form {
background-color: #ffc;
}
Magdagdag ng mga Border
Tulad ng mga kulay, maaari mong baguhin ang mga hangganan ng iba't ibang mga elemento ng form. Maaari kang magdagdag ng isang hangganan sa buong buong form. Siguraduhin na magdagdag ng padding, o ang iyong mga elemento ng form ay hihinto sa tabi ng hangganan.
Narito ang isang halimbawa ng code para sa isang 1-pixel black border na may 5 pixels ng padding:
form {
hangganan: 1px solid # 000;
padding: 5px;
}
Maaari mong ilagay ang mga hangganan sa paligid ng higit pa sa form mismo. Baguhin ang hangganan ng mga item sa pag-input upang mapalantad ang mga ito:
input {
border: 2px dashed # c00;
}
Mag-ingat kapag inilagay mo ang mga hangganan sa mga kahon ng pag-input habang mas kaunti ang mga ito tulad ng mga kahon sa pag-input, at maaaring hindi maunawaan ng ilang tao na maaari nilang punan ang form.
Pagsamahin ang Mga Tampok ng Estilo
Sa pamamagitan ng pagsasama-sama ng iyong mga elemento ng form na may pag-iisip at ilang CSS, maaari kang mag-set up ng magandang form na nakakatulong sa disenyo at layout ng iyong site.