VISSZA
MENÜIkonok segítségével jelezzük a felhasználó számára, hogy mely elemeket kötelező kitöltenie, és éppen hol tart a kitöltésben.
A kötelezően kitöltendő elemeket a :required álosztály-kijelölő segítségével választjuk ki és a háttérkép jobbra és középre, textarea elem esetén a felső margótól 10 px-re helyezzük el.
A hibásan kitöltött beviteli mezőknél az :invalid , a helyesen kitöltötteknél a :valid álosztály-kijelölőt használjuk.
Példa:
Forráskód
<style>
....
form input:required, form textarea:required {
background-image:url('webdev_help_16.png');
background-repeat:no-repeat;
background-position:99% 50%;}
form textarea:required {background-position:99% 10px;}
form input:focus:invalid, form input:not(:required):invalid {
background-image:url('webdev_err_16.png');
background-repeat:no-repeat;
background-position:99% 50%;}
form textarea:focus:invalid, form textarea:not(:required):invalid {
background-image:url('webdev_err_16.png');
background-repeat:no-repeat;
background-position:99% 10px;}
form input:required:valid, form input:focus:not(:required):valid{
background-image:url('webdev_ok_16.png');
background-repeat:no-repeat;
background-position:99% 50%;}
form textarea:required:valid {
background-image:url('webdev_ok_16.png');
background-repeat:no-repeat;
background-position:99% 10px;}
</style>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_urlap_info_elrendez_01.html