Cauta rapid aici ↑

Cum personalizam un element HTML

Personalizarea unui element HTML se poate face foarte usor si pentru asta vom avea nevoie de proprietatea appearance caruia ii vom da ca valoare none. Aceasta proprietate impiedica ca un element sa apara sub forma setarilor de baza pe care acesta le are si pana acum nu puteam decat sa stilizam elementul.

In exemplul urmator va voi arata cum personalizam un element al formularului, element ce contine un atribut cu o valoare speciala si este venit odata cu standardul HTML 5 si este vorba de <input type="range" /> care va contine si alte atribute foarte utile. Pentru ca exemplul sa fie si mai reusit ma voi folosi putin de JavaScript si de tag-ul HTML 5 output, tag creat special pentru a afisa o valoare. Tag-ul output este un tag pereche si contine in exemplul nostru doua atribute foarte importante. Atributul id stiti foarte bine ce face el iar atributul for va contine id-ul / id-urile elementelor ce fac parte la aceasta operatie de afisare a valorii elementului input.

Pentru CSS ma voi folosi si de pseudo-elementul ::slider-thumb ce face referire la partea mobila a elementului HTML.

Din pacate la data la care acest tutorial a fost creat, exemplul urmator putea fi vazut foarte bine doar in browserele CHROME si SAFARI. Am incercat sa il fac sa functioneze si pentru celelante browsere, insa rezultatul nu mi-a placut si din acest motiv am renuntat la celelante linii de cod.

JavaScript

Asa cum am spus, m-am folosit si de putin JavaScript, pentru ca in caz contrar tag-ul output afisa doar cifra zero. Linia de cod <form oninput="z.value = a.value"> se traduce in felul urmator.

Pe elementul form la evenimentul oninput valoarea elementului cu id-ul z va avea valoarea elementului cu id-ul a suprascriind valoarea default.