| Autor | Zpráva | ||
|---|---|---|---|
| anonym_ Profil * |
Ahoj,
potřeboval bych pomoci, jak ostylovat option tag. Konkrétně by to měla být velikost písma, která by pro tento element měla být nastavitelná (a je, jen jinak, než bych potřeboval).
Konkrétně mám pro select nastavený padding a font-size na poměrně vysokou hodnotu, viz horní část obrázku, což je OK.
Pak bych ale potřebovat po rozkliknutí nastavit jednotlivým option elementům nějakou menší, rozumnější velikost, což se mi nedaří.
Živá ukázka Dá se to nějak řešit? Screen jsem posílal z důvodu, že nevím, jak se to chová aktuálně na Win, screen pochází z Mac/Chrome (Mac/Safari má stejné zobrazení a předpokládám, že na Win to bude podobné). 
|
||
| Kcko Profil |
#2 · Zasláno: 24. 10. 2021, 21:32:37
anonym:
Select se obecně špatně styluje a jeho možnosti jsou velmi omezené, udělej si "atrapu", která jako select bude vypadat (nebo líp než select). |
||
| anonym_ Profil * |
#3 · Zasláno: 24. 10. 2021, 22:57:32
Kcko:
Děkuji za odpověď, nicméně na to jsem se bohužel neptal :-) Na dotykových zařízeních chci ponechat defaultní selecty, jsou tam nejvíce přístupné a lidi jsou na ně zvyklí. Řeším variantu jen pro desktop, a to tak, aby se to jako select chovalo (i s ovládáním pomocí šipek, psaním na klávesnici, atd.). Tam by ta atrapa byla časově neefektivní a asi ani ne tak dokonalá jako výchozí select. Čili, otázka trvá. Dá se nějak nastylovat option/sbalený select tak, aby se pracovalo s různými velikostmi písma? Výše v otázce je uvedena varianta, kdy má select velké písmo a snažím se zmenšit optiony. Půjde to samozřejmě i otočit, a sice, že by select měl malou velikost (pro ty optiony) a něco jako select:xxx by měl větší písmo.
Děkuji. |
||
| Keeehi Profil |
#4 · Zasláno: 25. 10. 2021, 10:08:39
|
||
| anonym_ Profil * |
#5 · Zasláno: 25. 10. 2021, 14:51:29
Keeehi:
Děkuji, nicméně to je přesně to, co mám já. Option menší velikost textu nepřebírá v tomto případě... Já pracoval pro ukázku s velikostmi v pixelech, ty s em, nicméně výsledek je stejný. |
||
| Radek9 Profil |
anonym:
Safari (a dost možná teda ani Chrome na Macu) nepodporuje font-size pro option. Jediná možnost, jak toho efektu docílit, je tedy použít nějakou tu atrapu.
Příp. si můžeš udělat dva selecty, jeden s větším textem a jeden s menším. Napozicuješ je tak, že ten menší bude před tím větším a bude mít opacity nastavenou na nulu. A při onchange toho malého se změní hodnota toho většího. Živá ukázka
Kdyby to nefungovalo s opacity (Safari je prostě divný prohlížeč, v Chromu na Windows to funguje hezky), tak je ještě možné použít průhledné pozadí a text. Živá ukázka
|
||
| Keeehi Profil |
#7 · Zasláno: 25. 10. 2021, 23:56:56
anonym:
To je maximum co s nativním selectem dosáhneš. O jednotky velikosti nejde. Každý systém se k tomu postaví dle svého. Chroma na Windows s tím udělá přesně to co chceš. Android ignoruje velikost úplně, jelikož na zobrazení použije vlastní UI které nijak neovlivníš. No a evidentně tvůj Apple sice umožňuje nastavit velikost textu v jeho UI ale bere ji z velikosti selectu. Možná by řešením bylo si vytvořit vlastní font, který by byl úplně stejný, jen velký. Na font-size bys pak nemusel šahat a mohl by jsi ho nechat na standardní velikosti. Jak se z obrázku zdá, tak použitý font UI Applu nepřebírá a používá svůj, vlastní. Jak to bude ale vypadat na Windows si ale musíš otestovat sám. |
||
| Kcko Profil |
#8 · Zasláno: 26. 10. 2021, 09:04:12
Pořád platí, že nejsnažší je si udělat atrapu ;-)
|
||
| anonym_ Profil * |
#9 · Zasláno: 26. 10. 2021, 10:24:59
Kcko:
Máš nějaký tip na řešení, které by bylo uživatelsky použitelné jako select? Tzn. aktivovat prvek při najetí tabem, procházet položky selectu šipkami nahoru/dolů, procházet položky po rozbalení selectu psaním na klávesnici (stisk "V" mi skočí na první položku od "V"), atd.? Defaultní systémový vzhled na dotykových zařízeních bych oželel, ale tohle je funkčnost, kterou od selectu očekávám. Programovat od nuly se mi to nechce, a asi jsem nikde neviděl jako select, který by fungoval tak, jak má select fungovat. Pokud někdo máte tip, rád se podívám a užiji :-) |
||
| Kcko Profil |
anonym:
harvesthq.github.io/chosen loopj.com/jquery-tokeninput select2.org (ale tenhle už je takovej těžkej kanón, složitej zbytečně) Pokud si nic nevybereš, tak se na to vykašli. Select nativní se opravdu složitě styluje, resp. nedá se skoro nastylovat jako např. checkbox nebo radio, pokud vyloženě nepotřebuju provádět nějaké vyhledávání nebo filtrování, nechávám nativní, maximálně tam doplním nějakou hezčí šipku na rozevření. |
||
|
Časová prodleva: 2 roky
|
|||
0