Před asi třemi týdny publikoval Víčko článek o jeho přechodu na prohlížeč Google Chrome. V něm popsal jednu vadu na kráse a sice automatické obarvování rámečku textového pole na oranžovou barvu v prohlížeči Google Chrome. V dnešním článku se dozvíte, jak tomu zabránit.

Popis problému

"Co mi vadí jako webovému designérovi je automatické obarvení rámečku pole po aktivaci do oranžové. V CSS tuto barvu lze přenastavit, bohužel Chrome ji ignoruje. Toto ohraničení nelze ani zrušit, což u složitějšího designu může vypadat divně."

Ukázka problému

Aktivované textové pole ve Chrome

Jak jsem došel k řešení

Stejně jako Víčko i já používám rychlý prohlížeč Google Chrome, a proto, když jsem dnes na Googlu něco hledal, jsem si náhodou všiml, že vyhledávací pole se po aktivaci nezbarví do oné oranžové barvy. Jindy si těchto věcí nevšímám, ale dnes jsem tomu musel přijít na kloub. Ze začátku jsem si myslel, že Google má pro toto zrušení svoji speciální vlastnost v CSS, ale nakonec jsem zjistil, že je to omyl. Prohrabával jsem tedy kód, dokud jsem nezjistil řešení.

Samotné řešení problému

Řešení je úplně triviální a není to speciální značkou, jak jsem si myslel. Zrušení vnějšího ohraničení, které přidává prohlížeč Google Chrome při aktivaci pole, se skrývá v CSS vlastnosti outline-style nastavené na (výchozí hodnotu v ostatních prohlížečích) hodnotu none. Kód by tedy mohl vypadat takto:

Pokud chcete zrušit toto automatické ohraničení u všech textových polí, oblastí i výběrových menu na celém webu, do stylopisu můžete umístit následující blok kódu:

Ukázka řešení

V následujícím textovém poli, textové oblasti nebo výběrovém menu můžete vidět funkčnost tohoto řešení. Po aktivaci se i v prohlížeči Google Chrome políčku nijak vnější ohraničení nezmění (tzn. nezoranžoví).