×
Vytvárame riešenia

Ako skryť ovládacie šípky pre výber čísla v textboxe (CSS)

V tomto článku predstavím, ako sa dajú skryť ovládacie šípky pre výber čísla v textboxe (spin buttons). Skôr ako sa pustím do riešenia, chcem podotknúť, že HTML5 number spinner je v súčasnosti podporovaný len prehliadačom Google Chrome (predpokladám, že aj Opera a Safari). Internet Explorer a Firefox umožňujú vpisovať aj písmená. Firefox a Google Chrome navyše zobrazujú ovládacie prvky na zmenu hodnoty (spin buttons).
A práve tieto ovládacie prvky často kazia dizajn a je potrebné ich skryť. Pre skrytie ovládacích prvkov pre HTML5 number spinner slúži nasledujúci zápis.
Príklad: Zápis do elementu <style>.
1
2
3
4
5
6
7
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
Otestovať správnosť zápisu je možné na nasledujúcom príklade.
Príklad: Zápis do elementu <body>.
1
<input type="number" min="1" required>

Záver

Do pozornosti tiež dávam článok Ako zistiť či hodnota v textboxe je číslo (JavaScript)


CSS,number spinner,textbox,<input>,required,min,spinner
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších