4. února 2012 18:04

Zrušení zvýraznění pole ve Chrome

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ě."

Jak jsem přešel na Google Chrome, Víčko

Ukázka problému

Aktivované textové pole ve Chrome
Aktivované textové pole ve Chrome
Živá ukázka: ve Chrome aktivujte toto pole

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:

<input type="text" style="outline-style: none;">

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:

input, textarea, select {
  outline-style: none;
}

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í).

Hodnocení

Celkové hodnocení
14 hlasů
Vaše hodnocení
Vyberte počet hvězdiček

Komentáře

Jméno:
Předmět:
Komentář:
  :):-|:P:D;):(8)[evil][arrow][idea][?][!]
Kontrola:

21.6.2014 8:55:02 Díky za nápovědu

Právě jsem toto použil na úpravu e-shopu, kde rozbalovací pole dělalo neplechu a zanechávalo po sobě linky. Super a díky.

Petr
0
0

5.2.2012 20:22:02 Super!

Fakt super článok. Nie žeby som Chrome používal, ale sem-tam si ho zapnem. A túto radu ocením :) .

benko
2
1

4.2.2012 22:18:28 Re: Skvělý tip

Souhlasím s Víčkem. Jednou jsem chtěl fórum naprogramovat, ale dalo by to dost práce (znám to z Blogerů a to je jen nepatrný zlomek) a PHP už pro mě (smím-li říct nás) není tak zajímavé jako C#, tak jsem se na to vykašlal. Co se týče spamů, určitě bych to řešit nechtěl (nedávno se spambot dostal i na dneškem zrušené stránky supermartas.wz.cz, ale pravda, ochrana tam žádná nebyla) a podle Víčka už spamboti obcházejí i CAPTCHA ochranu PHPBB fóra (na elfánii). Navíc je to velká zodpovědnost pořád odpovídat na dotazy a další věci. Takže odpověď zní ne, nepřemýšlím(e) ani neplánuji(eme) žádné fórum.

SuperMartas
3
1

4.2.2012 21:55:15 Re: Skvělý tip

To asi ne. I kdybych o tom přemýšlel, tak spamy, které nyní řeším na fóru Elfánie mě od toho odrazují ;)

Víčko
3
0

4.2.2012 21:36:26 Skvělý tip

Opravdu výborný tip, určitě ho využiji ;).
Jinak bych se chtěl zeptat, zda-li plánujete rozchodit třeba někdy i vlastní fórum, třeba i vámi naprogramované? :)

Grelek
3
0
© 2011 - 2017 SuperMartas a Tomáš Hypeš