Obrázkový submit button pomocí CSS

Pro některé formuláře se výborně hodí obrázkové odesílací tlačítko – vedle vyhledávacího políčka se často místo textu „Hledat“ umisťuje obrázek s lupou apod. Pokud máte přístup k HTML kódu stránky, nejjednodušší je použít <input type="image">, ale pokud třeba používáte nějaký redakční systém, nemusí být vůbec snadné se do zdrojového kódu dostat. Jak tedy celou záležitost zařídit čistě pomocí CSS?

Základem je použití metody image replacement, o které toho na netu můžete najít opravdu hodně. Problémem je, že konkrétních implementací je kupa a zatím jsem neviděl žádnou „dokonalou“. Situace se navíc u formulářů ještě víc komplikuje, protože INPUT je in-line element a s tím je vždycky trochu potíž (uvidíte sami). Přináším tedy vlastní pokus o řešení tohoto problému, ačkoliv ani tentokrát není dokonalý.

HTML kód:

<form action="#" method="get">
  <input type="text" id="TextField" />
  <input type="submit" value="Search" id="Button" />Další text
</form>

CSS kód (předpokládá přítomnost 15×15 px obrázku):

#Button {
  background: url(search-button.png) top left no-repeat;
  width: 15px; height: 15px;
  border: 0px;
  text-indent: -2000px;
  line-height: 0px;
  cursor: pointer; cursor: hand;
}

Věnujte pozornost všem řádkům, všechny jsou důležité.

1. Background nastavuje obrázek na pozadí. To je celkem jasné.
2. Výška a šířka elementu jsou nastaveny na rozměry obrázku.
3. Je potřeba se zbavit rámečku, který se u tlačítek standardně vykresluje.
4. Vlastnost text-indent schovává obsah mimo viditelnou oblast. CSS specifikace sice nepovoluje použití této vlastnosti na inline elementy, ale v IE a v Gecku to prostě funguje. O Opeře se zmíním na závěr.
5. Vlastnost line-height je potřeba pro IE. Bez ní se text nadále zobrazuje.
6. Pro uživatele je vhodné nastavit kurzor na packu, aby tušil, co se stane po kliknutí.

A nyní k Opeře. Při mém experimentování se mi nepodařilo najít žádný způsob, ať už validní nebo nevalidní, kterým se u ní dá text schovat. Brutální fintou je nastavit font-size na 200px nebo něco takového a tuto velikost podsunout pouze Opeře (Gecku to rozhodí layout). Je to fuj, ale jinak se mi to prostě nepovedlo.

Za jakékoliv připomínky budu velmi vděčný.

Update 1: Jan Brašna upozornil, že uvedený postup nefunguje v Safari. To je nepříjemné, ale Safari nemám, takže nemůžu zkoušet. Třeba někdo z čtenářů poradí…

Update 2: Jan Bien upozornil na to, že formuláře by se neměly stylovat. V tomto případě se ani tak nejedná o stylování formuláře, jako spíš o snahu nahradit obdélník s textem za nějaký obrázek, problémy se však vyskytly i tentokrát. Můj názor na tuto problematiku si můžete přečíst v článku Stylovat či nestylovat formuláře?

Ukázka: