Glisorul în HTML (proiectarea și ieșirea valorii)
Buna ziua tuturor!
Pentru a face cursorul în HTML nu este o problemă, pentru mulți să facă este simplu. Dar pentru a proiecta și a aduce frumos valoarea de slider nu poate toate.
Deci, în articolul de astăzi, vă voi spune cum să creați un cursor, cum să obțineți rezultatul și cum să proiectați cursorul.
De unde începem? În primul rând, vă voi arăta care etichetă este creată și ce atribute are.
Pentru a crea un cursor în HTML, există o etichetă "input":
Rezultatul este următorul:
Rețineți că mânerul cursorului este întotdeauna în mijloc și acest lucru poate fi modificat printr-un atribut special, însă nu numai acest lucru.
- Completare automată - autocompleți valoarea (poziția) a cursorului.
- Focalizare automată - focalizarea automată a cursorului după încărcarea completă a paginii.
- Dezactivat - Blocați cursorul. exemplu:
- Max - indică valoarea maximă a cursorului.
Valoarea implicită este "100". - Min - indică valoarea minimă a cursorului.
Valoarea implicită este "0". - Listă - creați etichete pe scara cursorului.
Observați numele "rangeList1". Uită-te unde am pus-o în cod. Acest nume poate fi orice, dar trebuie să fie unic și scris cu litere latine. Numele în id trebuie să se potrivească cu numele "list".
Nume - atribuie un nume cursorului.
Pas - stabilește intervalul pentru creșterea valorii (deplasării) cursorului.
Valoarea implicită este "1".
Valoare - indică valoarea numerică a cursorului trimis la server sau utilizată de scripturi.
Cum afișez valoarea cursorului?
Trebuie să introduceți acest cod în cursor.
Rețineți că dacă ați specificat "rangeValue" în paranteze, atunci când tipăriți rezultatul, trebuie să specificați același nume, altfel nu va funcționa:
Iată rezultatul:
De asemenea, pe Internet am găsit această metodă, așa cum mi sa părut foarte interesantă:
Cum creez un cursor?
Deci, avem un slider standard și este afișat pe fiecare browser în moduri diferite:
Continuăm să schimbăm formularul
Browserele Chrome, Safari și Opera
Anulați stilurile Webkit / Chrome standard. Pentru aceasta, setați proprietatea "-webkit-appearance" la "none":
Acum puteți adăuga orice proprietăți, de exemplu, granița, culoarea de fundal, rotunjirea granițelor și așa mai departe, pe care doar sufletul o va dori:
Ca urmare, se pare că aceasta:
Acum schimbați cursorul:
În Firefox
Pseudo-element ". -moz-range-track "va afecta bara de cursă și". -moz-range-track "va afecta mânerul cursorului.
În Internet Explorer
Rândul a venit la cele mai faimoase și mai stomac, ca pentru mine, browser-ul Internet Explorer:
Deci, dacă doriți ca glisoarele să fie afișate mai mult sau mai puțin în mod egal în toate browserele, va trebui să scrieți un cod mare în CSS, pentru fiecare browser propriu.
Articole similare
Trimiteți-le prietenilor: