SVG Icon bei fokussiertem Input-Element stylen

Ich habe SVG mittlerweile richtig lieben gelernt. Damit lässt sich viel flexibler arbeiten als mit Icon Fonts oder CSS-Sprites. Wie du selbst SVGs inline einfügst, beschrieb ich bereits in meinem Blogbeitrag "Icon Fonts leicht als Inline SVG einbinden". Bei meinem Suchfeld wollte ich kürzlich ein passendes Symbol nachrüsten — direkt am Anfang, aber innerhalb des Input-Elements. Der Suchbegriff wird dann neben dem Icon eingegeben.

Suchleiste bei re{raise}ace mit integriertem SVG Icon
Suchleiste bei re{raise}ace mit integriertem SVG Icon

Die Umsetzung hierfür ist keine große Sache. Der Beispielcode schaut folgendermaßen aus:

<form action="https://reraise.eu/">
	<div class="search">
		<input type="search" name="q" class="search-input" placeholder="suchen...">
		<label class="search-label"><svg class="icon icon-search" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="26" height="28" viewBox="0 0 26 28">
<path d="M18 13q0-2.891-2.055-4.945t-4.945-2.055-4.945 2.055-2.055 4.945 2.055 4.945 4.945 2.055 4.945-2.055 2.055-4.945zM26 26q0 0.812-0.594 1.406t-1.406 0.594q-0.844 0-1.406-0.594l-5.359-5.344q-2.797 1.937-6.234 1.937-2.234 0-4.273-0.867t-3.516-2.344-2.344-3.516-0.867-4.273 0.867-4.273 2.344-3.516 3.516-2.344 4.273-0.867 4.273 0.867 3.516 2.344 2.344 3.516 0.867 4.273q0 3.437-1.937 6.234l5.359 5.359q0.578 0.578 0.578 1.406z"></path>
</svg><span class="sr-only">Blogsuche</span></label>
		<button type="submit" class="sr-only">Suchen</button>
	</div>
</form>
.icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.icon-search {
	width: 0.9285706554849185em;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.search-input{
	padding-left:20px;
	display:block;
}
.search-label{
	float:left;
	margin:-18px 3px;
  }

Hier der Zwischenstand in einer jsFiddle Demo. Wie dir sicher aufgefallen ist, steht das Label hinter dem Input-Element. Es sollte normalerweise genau anders herum sein. Korrekt! Ich habe beides absichtlich vertauscht. Dafür gibt es zwei Gründe. Zum einen lässt sich das SVG so besser ausrichten und zum anderen spielt es für den fokussierten Zustand des Input-Elements eine entscheidende Rolle. Die Ausrichtung des Symbols realisierst du mit float und margin. Der Suchbegriff rutscht durch padding-left hinter das Icon, sodass sich nichts überlagert. Also wirklich total simpel.

Input fokussieren und gleichzeitig den Zustand des SVG-Icons ändern

Jetzt fehlt nur noch das Styling, wenn das Suchfeld fokussiert wird.

.search-input:focus{
  border:2px solid green;
  color:green
}

Klickst du in das Input-Element, werden der Rand und die Schriftfarbe Grün gefärbt. Der Zustand des SVGs bleibt jedoch unverändert. CSS sieht es normalweise nicht vor, dass du bei der Zustandsänderung eines Elements, ein anderes gleichzeitig mitänderst. Über einen kleinen Trick gelingt das trotzdem. Das ist auch der Grund, wieso das Label in diesem Fall zwingend hinter dem Suchfeld folgen muss. Wir verwenden den Plus-Kombinator und tricksen CSS damit ein klein wenig aus.

.search-input:focus + .search-label .icon{
	fill:red
}

Fokussierst du erneut das Suchfeld, verändert das Input-Element abermals seinen Zustand und das SVG färbt sich diesmal Rot. Das fertige Beispiel kannst du auf jsFiddle betrachten. Mit diesem kleinen Trick kannst du deine Formulare mit schicken Icons aufpeppen. Das Tolle daran, du kommst an dieser Stelle komplett ohne Javaskript aus. Das war mir persönlich wichtig. Ich greife nur zu Javaskript, wenn es wirklich keine andere Lösung gibt.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare – Schreib mir deine Meinung!

Fülle bitte die nachstehenden Felder aus. Angaben mit einem Sternchen sind Pflichtangaben. Deine E-Mail-Adresse wird nicht veröffentlicht.