Autor Zpráva
Izolex
Profil
Ahoj, mám tu problém, na který jehož řešení nemohu přijít... Jde o to, že když nastavím tagu select pomocí border-radius kulatý rámeček, tak se za ním zobrazí nepěkný bílý okraj (chrome), v jiných prohlížečích je zase kulatý okraj bílé zbarvený.

Přikládám obrázek jak to vypadá ve chromu:


Styl:
width: 210px; 
border: solid 2px green; 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
padding: 4px 6px 4px 6px; 
margin: 2px; 
font-size: 16px; 
font-family: Arial; 
color: black;

Nevíte někdo, jak odstranit tu vnější bílou barvu za rámečkem pomocí CSS?
Radimek
Profil
Pokud vim, select by se spravne stylovat nemel. Vetsinou se to resi:

<div class="box-se-zaoblenymi-rohy">
<select></select>
</div>
Pokec
Profil *
To spíš vypadá, že je nastaveno bílé pozadí pro ten select nebo option a chrome to pozadí prostě nezakulatí. Chtělo by to buďto i HTML k tomu CSS nebo živou ukázku a taky by pomohla verze chrome. Možnost je ještě to řešit pres jQuery a tím se vyhnout použití selectu.
finchCZ
Profil
může tohle pomoci? demo
panther
Profil
finchCZ:
natahovat si do stránky zbytečně, kvůli kulatým rohům u selectu jQuery UI? Jsi se snad zbláznil, ne?

Izolex:
tohle se mi moc nezdá. Dodej odkaz na stránku, kde se tak děje. Případně, než tahat do toho výše odkázané, na kulaté rohy bych se vykašlal.
finchCZ
Profil
panther:
Chtěl odpověď, tak jsem hledal a první odpověď bylo toto, tudíž jsem to tady dal. Nevím, jestli je to zbytečné, pokud ano, tak jsem se doopravdy zbláznil, pokud ne, tak bych raději odpověděl něčím užitečným.
Chamurappi
Profil
Reaguji na finchCZ:
Napodobeniny <select>ů v tvé ukázce nejdou ovládat klávesnicí.

tak jsem hledal a první odpověď bylo toto, tudíž jsem to tady dal
Čímž se z toho stala tvoje rada, ručíš za její správnost.


Reaguji na Izolexe:
Pokud bych opravdu potřeboval kulaté rohy, obalil bych <select> do pár <div>ů a udělal je obrázkem, aby je viděl pokud možno každý.
Pokud bych je nepotřeboval, nedělal bych je nikde.
Po kompromisu, který by stejně nefungoval uživatelům Explorerů 8 a starších, bych nepátral.
finchCZ
Profil
Teď jsem zkusil ovládat klávesnicí a jde to, sice kapku krkolomně, ale jde. Napodobeniny to nejsou, koukni do kódu.
V čem je tedy toto řešení tak špatné? Jinak to řešení s obrázky v divu okolo selectu je fajné.

Ještě se nevyjádřil Izolex, co použil/použije.
panther
Profil
finchCZ:
Napodobeniny to nejsou, koukni do kódu.
ty „selecty“ jsou nějaké spany, selecty to nejsou.

V čem je tedy toto řešení tak špatné?
minimálně v tom, že zbytečně načítáš X zbytečných kB JavaScriptů kvůli něčemu, co je úplně zbytečné.
Medvídek
Profil
panther:
Nesouhlasím, já třeba výše zmíněný způsob stylování selectů taky používám. Pokud si to prostě grafik vymyslí, tak ti nezbývá nic jinýho, než to tak udělat.
A v dnešní době je 16Kb zanedbatelný (pokud počítám pouze ten JS pro selecty, protože zbytek stejně načítám kvůli jiným věcem), navíc po první návštěvě také cachovaný.

Chamurappi:
Napodobeniny <select>ů v tvé ukázce nejdou ovládat klávesnicí.
Ve Firefoxu co jsem zkoušel, tak jdou.
panther
Profil
Medvídek:
protože zbytek stejně načítám kvůli jiným věcem
což nemusí být vždy pravda. Selecty jsou hezké (a použitelnější) s defaultním stylem, na který je uživatel zvyklý.

Pokud si to prostě grafik vymyslí, tak ti nezbývá nic jinýho, než to tak udělat.
...a nebo mít grafika, který je rozumný a nedělá z webu nesmyslné omalovánky.
Medvídek
Profil
panther:
My třeba spolupracujeme s firmou, která dělá celkem veliký projekty a grafika našeho portálu nás stála zatím těsně pod mega a to ještě nejsme u konce. V dnešní době je prostě grafika jedna z věcí, která prodává. Samozřejmě že mě, jako kodéra to sere, že se musím srát s každým inputem, grafickym radio buttonem a checkboxem a selectama, ale nic s tim prostě nezmužu :) To je samý, jako třeba písmo. Grafika prostě nezajímá, jak vyřešíš to, že jsou na webu všechny nadpisy fontem Helvetica. Prostě na tobě, jako kodérovi je, aby si dodržel grafický návrh.
mylan
Profil
Ak sa to deje len v chrome, skús do CSS pridať: -webkit-background-clip: padding-box;
Izolex
Profil
Všem děkuji za rady.
Nechtělo se mi již zasahovat do HTML kódu, proto jsem nepoužil obalení divem ani řešení od finchCZ.
Řešení od mylan-a mi také nefunguje i když nevím proč, ale určitě se na toto řešení zaměřím, vypadá velmi zajímavě.
Nevím jak je to možné, ale tyto nepříjemné okraje se mi dělají jen u rámečku, který je širší více než 1px. Takže jsem rámečky u selectů dal pouze na 1pixel.
Ještě jednou všem děkuji, určitě Vaše rady někdy použiji

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: