Komponenty > Vyhľadávanie tlačidlo lupa > neviditeľný focus (2.4.7)

[athelas64]

Focus na tlačidle s lupou nie je viditeľný, lebo tam je nastavený

.sdn-header__form button:focus {
  outline: transparent;
}

Zamerané pole Hľadať (vyzerá to škaredo)

Zamerané tlačidlo lupa (nie je vôbec vidieť, že je zamerané)

Navrhované riešenie po úprave:

riadky, ktoré nemajú poznámku, sú pôvodné, riadky v komentároch treba odstrániť:

/* .sdn-header__form button:focus {outline: transparent;} */

.sdn-header__form button {
  position:absolute;
/*pridané, aby ohraničenie nepretekalo mimo vstupné pole*/
  top: 3px; 
  right: 3px; 
  bottom: 3px;
  /* width:40px; treba dať prečo, lebo v chrome to rozbíja layout - šírku ohraničenia prispôsobí neviditeľnému slovu Hľadať*/
  padding:0;
  border:0;
  /*border-radius:3px; von, lebo to nechá biele rožky*/
  /*opacity:.5; preč kvôli kontrastu lupy*/
  color: transparent; 
  background:#fff url(/packs/media/images/icon-search.svg) no-repeat 50%;
  background-size:18px 18px
}