site logo

Jak odstranit border formulářového elementu - select

V předchozím článku jsme se zbývali stylováním formulářového elementu select. Nepodařilo se odstranit rámeček v browserech IE6 ani IE7. Protože jsem našel v logu hodně dotazů na odstranění rámečků okolo tohoto prvku, nabízím snad původní řešení. Browser IE8 RC1 již umožní nastavit bezrámečkový select.

Vpravo jsou ukázky možnosti stylování rámečku select prvku. Řešení které funguje i v IE. Našim cílem je nový rámeček, který budeme mít pod kontrolou našeho stylu.

První řádka ukázky je nahý select prvek, zbavený rámečku. Je jasné, že vypadá docela nepřirozeně.

Druhá ukázka je stejný, tentokrát zarámovaný select. Rámeček je vytvořen prvkem div, jehož rámeček máme plně pod kontrolou.

Třetí živá ukázka prvku select je zarámování provedeno pomocí barvy pozadí.

Pozor, popsaný postup je spíše experimentální než univerzální, pokud jej budete používat, pak s opatrností. Není odzkoušeno v systémech Mac ani Linux.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
...

<style type="text/css">
select {font: normal 13px Arial, SansSerif, Verdana; color: black;}
.container {
  border: 0;
  position: relative; width: 124px; height: 18px; overflow: hidden;
}
.inpSelect {
  color: black; background: #ffa;
  position: absolute; width: 128px; top: -2px; left: -2px;
}
</style>

<body>
...
<div class="container">
<select class="inpSelect" name="xxx">
<option value="0" selected="selected">aktuální browser</option>
<option value="1">IE</option>
<option value="2">Firefox</option>
<option value="3">Opera</option>
<option value="4">Safari</option>
</select>
</div>
...
</body>

CSS kód vychází z podobného principu jako při ořezání dlouhého textu v buňce tabulky. Element select je uzavřen do konteineru, který má ve stylu nastavenu vlastnost overflow: hidden a tentokrát navíc i vlastnost position: relative;. Prvku select nastavíme vlastnost position: absolute; a posuneme tento prvek tak, aby rámeček byl umístěn za hranicí konteineru a tím pádem neviditelný. Naopak rozbalovací tlačítko musí zůstat viditelné celé.

Zbývá vyladit rozměry konteineru i jeho obsahu a posunout select tak, aby byl rámeček prvku select zakrytý symetricky. Rámeček selectu má v defaultním zobrazení šířku 2 pixely, proto šířka a výška konteineru bude celkově o 4 pixely menší než vnější rozměry prvku select. Nakonec posuneme element select o 2 pixely nahoru a vlevo.

Šířka konteineru vychází z layoutu formuláře, jeho výška je určena použitým typem písma v prvku select. Proto je tento způsob odstranění okrajů prvku select vhodný pouze pro fixní velikost písma.

Třída .container má stanovenu vlastnost border: 0; protože konteiner je vložen do tabulky, a ta zajistí layout formuláře a vytváří rámeček. Při jiném layoutu, kde je použit samostatný konteiner, můžeme stanovit vlastní libovolný rámeček např. border: 1px solid #999;. Nezapomeňte správně určit rozměry konteineru podle W3C box modelu. Rozměry prvku select se ale počítají podle tradičního box modelu jak je posáno v článku box model formulářových elementů.

Podobného efektu dosáhneme použitím vlastnosti position: absolute; clip: rect(top right bottom left); pro prvek select, ale prostor po odstraněném rámečku zůstane prázdný a opět je nutné posunout celý element vlevo nahoru. Další možnost by byla použití iframe.

Problémy

Uvedené řešení vyžaduje návrh s přesností na pixely. Z toho plyne, že nelze měnit velikost písma použitého v prvku select a konteiner i prvek select musí mít stanoveny pevné rozměry. Font použitý ve formulářových prvcích se nedědí a musí být font deklarován pro prvek select samostatně.

Browser FireFox 2 obsahuje zřejmě chybu, při výšce určené pomocí CSS vykreslí skutečnou výšku prvku o 2 pixely větší. Následkem této chyby není spodní část tlačítka prvku vykreslená. Ve verzi 3 je již tato chyba odstraněna a tlačítko je vykresleno celé.

Řešení nelze univerzálně použít pro rozvinutý select, tedy když je použit atribut size prvku select. Size udává kolik řádků elementu select je trvale viditelných. Na scrrenshotech z minulého článku bylo vidět, že nelze dosáhnout jednotných rozměrů pro rozbalený select a proto je tato metoda nepoužitelná.

Na konci minulého článku byla ukázka chybného překrývání elementu select, který se projevuje v browseru IE6. Popsaný způsob odstranění rámečku způsobí, že podobná chyba se objeví ve všech browserech díky pozicování absolute. Absolutní prvky vyplavou vždy nahoru, nad obsah stránky. Když návrh layoutu vyžaduje překrývání dynamickými prvky, musí být i tyto prvky pozicovány absolutně. Teprve potom je možné pomocí vlastnosti z-index určit správné překrývání i s tímto experimentálním prvkem select. V prohlížeči IE6 ovšem chyba překrývání zůstane.

updated 02.02.2009