{"id":1854,"date":"2017-03-01T11:28:15","date_gmt":"2017-03-01T10:28:15","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=1854"},"modified":"2020-07-02T09:40:58","modified_gmt":"2020-07-02T07:40:58","slug":"dropdown-css3","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/","title":{"rendered":"Dropdown mit CSS3 gestalten"},"content":{"rendered":"<p>Eine der gr\u00f6\u00dften Herausforderungen f\u00fcr den geneigten Frontend-Entwickler ist das Stylen von Formularfeldern.\u00a0Die kleinteilige Arbeit, spezielle W\u00fcnsche der Grafikabteilung und zahlreiche Browser-Besonderheiten bringen den Programmierer hier regelm\u00e4\u00dfig an seine Geduldsgrenze. Die L\u00f6sung ist\u00a0meist der Einsatz von jQuery-Plugins, \u00fcber die das zugrundeliegende HTML komplett umgebaut wird &#8211; eine nicht immer so elegante L\u00f6sung. Beispielsweise wird auch das native Standardverhalten von Dropdowns auf mobilen Endger\u00e4ten unterbunden, was\u00a0nicht immer gewollt ist.<\/p>\n<p>CSS3 erleichtert uns die Arbeit mittlerweile etwas und stellt M\u00f6glichkeiten zur Verf\u00fcgung, das Aussehen von Formularfeldern ohne Zuhilfenahme von JavaScript zu beeinflussen. In diesem kurzen Tutorial wollen wir davon Gebrauch machen und ein optisch ansprechendes Select-Auswahlfeld gestalten. Dieses soll einen transparenten Hintergrund, Schatten und abgerundete Ecken erhalten. Au\u00dferdem wird ein individueller Pfeil vergeben, den wir aus der OpenSource-Icon-Schriftart <a href=\"https:\/\/www.clickstorm.de\/blog\/icons-gesucht-font-awesome\/\" target=\"_blank\" rel=\"noopener noreferrer\">FontAwesome<\/a> entnehmen und \u00fcber <a href=\"http:\/\/fontello.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">fontello<\/a> integrieren.<\/p>\n<h2>Das Grundger\u00fcst<\/h2>\n<p>Das HTML halten wir so simpel wie m\u00f6glich und setzen ein einfaches &lt;select&gt; auf einen gr\u00fcnen Hintergrund. Die einzige Ver\u00e4nderung, die wir zu Beginn vornehmen, ist ein Wrapper mit der CSS-Klasse &#8222;select-wrapper&#8220;, den wir um das Element legen und dem wir eine Breite von 200px mitgeben. Wir werden diesen sp\u00e4ter ben\u00f6tigen, wenn wir den Pfeil integrieren.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;div class=\"select-wrapper\"&gt;\r\n  &lt;select&gt;\r\n    &lt;option&gt;Option 1&lt;\/option&gt;\r\n    &lt;option&gt;Option 2&lt;\/option&gt;\r\n    &lt;option&gt;Option 3&lt;\/option&gt;\r\n  &lt;\/select&gt;\r\n&lt;\/div&gt;<\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.select-wrapper {\r\n  width: 200px;\r\n}<\/pre>\n<p>Ungestylt schaut das &lt;select&gt; recht trostlos aus (links), unser Ziel ist die Vorlage (rechts), in der das Element auf eine ansprechende\u00a0Art und Weise mit dem Hintergrund harmoniert:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1876 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/02\/1-select-unstyled-e1487954788865.png\" alt=\"Dropdown ungestylt\" width=\"280\" height=\"133\" \/>\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1875 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/02\/1-select-styled-e1487954838576.png\" alt=\"Dropdown gestylt\" width=\"280\" height=\"133\" \/><\/p>\n<h2>Browser-Styles entfernen<\/h2>\n<p>Im ersten Schritt\u00a0reduzieren\u00a0wir die Standard-Formatierung der zu ber\u00fccksichtigenden Browser auf ein Minimum. Wir erreichen das \u00fcber die CSS3-Eigenschaft &#8222;appearance&#8220;, die wir auf &#8222;none&#8220; setzen. Hierbei m\u00fcssen wir beachten, dass wir Pr\u00e4fixe f\u00fcr die Browser Chrome, Safari und Firefox vergeben. Au\u00dferdem entfernen wir den auff\u00e4lligen Rahmen.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">select {\r\n  -moz-appearance: none;\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  border: none;\r\n}<\/pre>\n<p>Nun sollte es in fast allen Browsern ungef\u00e4hr so ausschauen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1882 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/02\/2-select-clear-e1487954950210.png\" alt=\"Dropdown ohne Browser-Styling\" width=\"280\" height=\"133\" \/><\/p>\n<p>In fast allen? Ganz recht! Der Internet Explorer macht uns hier noch einen Strich durch die Rechnung und zeigt uns nach wie vor den Standard-Pfeil an. Wir schreiben dem IE daher eine Extra-Einladung mit folgendem Code-Schnipsel:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">select::-ms-expand {\r\n  display: none;\r\n}<\/pre>\n<p>Nun kann es aber mit dem eigentlichen Styling losgehen.<\/p>\n<h2>Abst\u00e4nde und transparenter Hintergrund<\/h2>\n<p>Wir k\u00fcmmern uns als n\u00e4chstes darum, dem Element ein wenig Innenabstand zu geben. Dazu k\u00f6nnen wir ganz einfach mit width, height und padding arbeiten. Da wir f\u00fcr den \u00fcbergeordneten Wrapper bereits eine Breite vergeben haben, strecken wir das &lt;select&gt; auf 100%. Beim padding ist zu beachten, dass der Firefox einen minimalen Abstand von Haus aus generiert, den wir mit der folgenden zus\u00e4tzlichen Zeile angleichen k\u00f6nnen (siehe Kommentar von Guido Jansen unter diesem Beitrag):<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">-moz-padding-start: calc(10px - 3px);<\/pre>\n<p>Da wir im &lt;select&gt; nicht mit der CSS-Eigenschaft &#8222;opacity&#8220; arbeiten k\u00f6nnen, verwenden wir f\u00fcr den Hintergrund ein transparentes Pixel im PNG-Format, das wir in x- und y-Richtung wiederholen. Wer sich die Arbeit sparen m\u00f6chte, f\u00fcr das Pixel sein Grafikprogramm zu \u00f6ffnen, kann sich hier z.B. auch einfach eines generieren lassen:\u00a0<a href=\"http:\/\/www.1x1px.me\/\" target=\"_blank\" rel=\"noopener noreferrer\">www.1x1px.me<\/a>.<\/p>\n<p>Mit dem folgenden CSS haben wir uns unserer Vorlage ein gro\u00dfes St\u00fcck angen\u00e4hert:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">select {\r\n  \/* ... *\/\r\n  width: 100%;\r\n  height: 40px;\r\n  -moz-padding-start:\u00a0calc(10px\u00a0-\u00a03px);\r\n  padding-left: 10px;\r\n  background: url(fff-0-2.png) repeat;\r\n  color: #fff;\r\n  font-family: 'Open Sans', sans-serif;\r\n  font-size: 16px;\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1883 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/02\/3-select-styled-e1487955039440.png\" alt=\"Dropdown mit transparentem Hintergrund\" width=\"280\" height=\"133\" \/><\/p>\n<h2>Schatten hinzuf\u00fcgen, Ecken abschleifen, Bugs fixen<\/h2>\n<p>Die Eigenschaften &#8222;border-radius&#8220; und &#8222;box-shadow&#8220; geben unserem Element den n\u00f6tigen Feinschliff. Ein transparentes Schwarz soll als Schatten gen\u00fcgen:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">select {\r\n  \/* ... *\/\r\n  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);\r\n  border-radius: 3px;\r\n}<\/pre>\n<p>Die Browser bringen nach wie vor noch einige unsch\u00f6ne Besonderheiten mit sich, die wir aber ver\u00e4ndern k\u00f6nnen. Im Chrome f\u00e4llt uns auf, dass ein unsch\u00f6ner, blauer Rahmen gezeichnet wird, wenn wir das Element fokussieren. Dieses Verhalten kann leicht modifiziert werden:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">select {\r\n  \/* ... *\/\r\n  outline: none;\r\n}<\/pre>\n<p>W\u00e4hrend die mobilen Ger\u00e4te alle brav ihre nativen Men\u00fcs bei Touch auf das &lt;select&gt; aufklappen, f\u00e4llt uns in den Desktop-Browsern auf unangenehme Art und Weise auf, dass sich die wei\u00dfe Schriftart, die wir verwendet haben, auch auf die Auswahlliste auswirkt. Entsprechend setzen wir hier unsere Schriftfarbe zur\u00fcck:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">select option {\r\n  color: #666;\r\n}<\/pre>\n<p>Zu guter letzt f\u00fchlen wir dem Internet Explorer nochmal richtig auf den Zahn und werden f\u00fcndig: Nachdem wir eine Option markiert haben, verf\u00e4rbt sich das &lt;select&gt; unsch\u00f6n. Aber auch das k\u00f6nnen wir beeinflussen:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">select:focus::-ms-value {\r\n  background-color: transparent;\r\n}<\/pre>\n<p>F\u00fcr das optimale &#8222;Button-Click-Feeling&#8220; fehlt uns nur noch ein kleines Detail: Wir ver\u00e4ndern beim Hovern unseren Mauszeiger!<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">select {\r\n  \/* ... *\/\r\n  cursor: pointer;\r\n}<\/pre>\n<h2>Ein Detail: Der Pfeil!<\/h2>\n<p>Beinah k\u00f6nnte unser Dropdown jetzt als Button durchgehen, doch das lassen wir nicht zu und holen uns das Dropdown-Aussehen zur\u00fcck, indem wir den Pfeil aus fontello \u00fcber dem &lt;select&gt; positionieren. Dabei stellen wir schnell fest, dass das auf dem &lt;select&gt; selbst nicht m\u00f6glich ist. Nun kommt also unser Wrapper ins Spiel, den wir relativ positionieren. So k\u00f6nnen wir den Pfeil einfach als :before-Element einbinden und diesen absolut positioniert in den Wrapper legen. Das k\u00f6nnte im Stylesheet ungef\u00e4hr so ausschauen:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.select-wrapper {\r\n  \/* ... *\/\r\n  position: relative;\r\n}\r\n\r\n.select-wrapper::before {\r\n  font-family: fontello;\r\n  content: \"\\f107\";\r\n  font-size: 20px;\r\n  position: absolute;\r\n  right: 15px;\r\n  top: 10px;\r\n  color: #fff;\r\n}<\/pre>\n<p>Die Einbindung \u00fcber fontello haben wir in einem vorangegangen <a href=\"https:\/\/www.clickstorm.de\/blog\/icons-gesucht-font-awesome\/\" target=\"_blank\" rel=\"noopener noreferrer\">Beitrag<\/a> bereits thematisiert.<\/p>\n<p>Ein kleines Detail fehlt aber noch. Zwar erscheint der Pfeil an der richtigen Position, aber nat\u00fcrlich soll er auch klickbar sein und das &lt;select&gt; \u00f6ffnen. Wir behelfen uns dazu mit einem Trick und lassen das klickbare &lt;select&gt; sozusagen &#8222;durchscheinen&#8220;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.select-wrapper::before {\r\n  \/* ... *\/\r\n  pointer-events: none;\r\n}<\/pre>\n<p>Fertig! Wir \u00fcberpr\u00fcfen noch einmal unser &lt;select&gt; in allen Browsern und auf allen Ger\u00e4ten und sind mit dem Ergebnis ganz zufrieden.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1875 size-full\" src=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/02\/1-select-styled-e1487954838576.png\" alt=\"Dropdown gestylt\" width=\"280\" height=\"133\" \/><\/p>\n<p>Wer weitere Anregungen, Ideen oder Erg\u00e4nzungen zum Thema hat, darf sich gern in den Kommentaren dazu austoben.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Beitrag zeigen wir euch, wie Frontend-Entwickler das Gef\u00fchl der Verzweiflung beim Stylen von Dropdowns mit CSS3 \u00fcberwinden k\u00f6nnen.<\/p>\n","protected":false},"author":1,"featured_media":1894,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[137],"tags":[101,92,67,100,68,66],"class_list":["post-1854","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-browserkompatibilitaet","tag-css","tag-css3","tag-dropdown","tag-html5","tag-webdesign"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Dropdown mit CSS3 gestalten - clickstorm Blog<\/title>\n<meta name=\"description\" content=\"In diesem Beitrag zeigen wir euch, wie Frontend-Entwickler das Gef\u00fchl der Verzweiflung beim Stylen von Dropdowns \u00fcberwinden.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dropdown mit CSS3 gestalten - clickstorm Blog\" \/>\n<meta property=\"og:description\" content=\"In diesem Beitrag zeigen wir euch, wie Frontend-Entwickler das Gef\u00fchl der Verzweiflung beim Stylen von Dropdowns \u00fcberwinden.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"clickstorm Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/de-de.facebook.com\/clickstorm\/\" \/>\n<meta property=\"article:published_time\" content=\"2017-03-01T10:28:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-02T07:40:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/02\/dropdown-mit-hilfe-css3_teaser-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1170\" \/>\n\t<meta property=\"og:image:height\" content=\"577\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christoph\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:site\" content=\"@clickstorm_gmbh\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christoph\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/\"},\"author\":{\"name\":\"Christoph\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/72317116cc38e22f8d719b8ea642e549\"},\"headline\":\"Dropdown mit CSS3 gestalten\",\"datePublished\":\"2017-03-01T10:28:15+00:00\",\"dateModified\":\"2020-07-02T07:40:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/\"},\"wordCount\":898,\"commentCount\":27,\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/dropdown-mit-hilfe-css3_teaser-01.jpg\",\"keywords\":[\"Browserkompatibilit\u00e4t\",\"CSS\",\"CSS3\",\"Dropdown\",\"HTML5\",\"Webdesign\"],\"articleSection\":[\"Frontend\"],\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/\",\"name\":\"Dropdown mit CSS3 gestalten - clickstorm Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/dropdown-mit-hilfe-css3_teaser-01.jpg\",\"datePublished\":\"2017-03-01T10:28:15+00:00\",\"dateModified\":\"2020-07-02T07:40:58+00:00\",\"description\":\"In diesem Beitrag zeigen wir euch, wie Frontend-Entwickler das Gef\u00fchl der Verzweiflung beim Stylen von Dropdowns \u00fcberwinden.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/dropdown-mit-hilfe-css3_teaser-01.jpg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/02\\\/dropdown-mit-hilfe-css3_teaser-01.jpg\",\"width\":1170,\"height\":577,\"caption\":\"DropDown mit Hilfe von CSS3 stylen, Mockup\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/dropdown-css3\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Dropdown mit CSS3 gestalten\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"name\":\"clickstorm Blog\",\"description\":\"Neuigkeiten rund um Webentwicklung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#organization\",\"name\":\"clickstorm GmbH\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/11\\\/logo.svg\",\"caption\":\"clickstorm GmbH\"},\"image\":{\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/de-de.facebook.com\\\/clickstorm\\\/\",\"https:\\\/\\\/x.com\\\/clickstorm_gmbh\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCEaU1eUbug6OiI4uU6vA-cA\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/#\\\/schema\\\/person\\\/72317116cc38e22f8d719b8ea642e549\",\"name\":\"Christoph\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/eaa9279af3270a602b74ca97c706f9bcad88ffee6f4848fd914c08f5e0c4edc3?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/eaa9279af3270a602b74ca97c706f9bcad88ffee6f4848fd914c08f5e0c4edc3?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/eaa9279af3270a602b74ca97c706f9bcad88ffee6f4848fd914c08f5e0c4edc3?s=96&d=mm&r=g\",\"caption\":\"Christoph\"},\"url\":\"https:\\\/\\\/www.clickstorm.de\\\/blog\\\/author\\\/christoph\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dropdown mit CSS3 gestalten - clickstorm Blog","description":"In diesem Beitrag zeigen wir euch, wie Frontend-Entwickler das Gef\u00fchl der Verzweiflung beim Stylen von Dropdowns \u00fcberwinden.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/","og_locale":"de_DE","og_type":"article","og_title":"Dropdown mit CSS3 gestalten - clickstorm Blog","og_description":"In diesem Beitrag zeigen wir euch, wie Frontend-Entwickler das Gef\u00fchl der Verzweiflung beim Stylen von Dropdowns \u00fcberwinden.","og_url":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/","og_site_name":"clickstorm Blog","article_publisher":"https:\/\/de-de.facebook.com\/clickstorm\/","article_published_time":"2017-03-01T10:28:15+00:00","article_modified_time":"2020-07-02T07:40:58+00:00","og_image":[{"width":1170,"height":577,"url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/02\/dropdown-mit-hilfe-css3_teaser-01.jpg","type":"image\/jpeg"}],"author":"Christoph","twitter_card":"summary_large_image","twitter_creator":"@clickstorm_gmbh","twitter_site":"@clickstorm_gmbh","twitter_misc":{"Verfasst von":"Christoph","Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/#article","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/"},"author":{"name":"Christoph","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/72317116cc38e22f8d719b8ea642e549"},"headline":"Dropdown mit CSS3 gestalten","datePublished":"2017-03-01T10:28:15+00:00","dateModified":"2020-07-02T07:40:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/"},"wordCount":898,"commentCount":27,"publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/02\/dropdown-mit-hilfe-css3_teaser-01.jpg","keywords":["Browserkompatibilit\u00e4t","CSS","CSS3","Dropdown","HTML5","Webdesign"],"articleSection":["Frontend"],"inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/","url":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/","name":"Dropdown mit CSS3 gestalten - clickstorm Blog","isPartOf":{"@id":"https:\/\/www.clickstorm.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/#primaryimage"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/#primaryimage"},"thumbnailUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/02\/dropdown-mit-hilfe-css3_teaser-01.jpg","datePublished":"2017-03-01T10:28:15+00:00","dateModified":"2020-07-02T07:40:58+00:00","description":"In diesem Beitrag zeigen wir euch, wie Frontend-Entwickler das Gef\u00fchl der Verzweiflung beim Stylen von Dropdowns \u00fcberwinden.","breadcrumb":{"@id":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/#primaryimage","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/02\/dropdown-mit-hilfe-css3_teaser-01.jpg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/02\/dropdown-mit-hilfe-css3_teaser-01.jpg","width":1170,"height":577,"caption":"DropDown mit Hilfe von CSS3 stylen, Mockup"},{"@type":"BreadcrumbList","@id":"https:\/\/www.clickstorm.de\/blog\/dropdown-css3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.clickstorm.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Dropdown mit CSS3 gestalten"}]},{"@type":"WebSite","@id":"https:\/\/www.clickstorm.de\/blog\/#website","url":"https:\/\/www.clickstorm.de\/blog\/","name":"clickstorm Blog","description":"Neuigkeiten rund um Webentwicklung","publisher":{"@id":"https:\/\/www.clickstorm.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.clickstorm.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.clickstorm.de\/blog\/#organization","name":"clickstorm GmbH","url":"https:\/\/www.clickstorm.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","contentUrl":"https:\/\/www.clickstorm.de\/blog\/wp-content\/uploads\/2017\/11\/logo.svg","caption":"clickstorm GmbH"},"image":{"@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/de-de.facebook.com\/clickstorm\/","https:\/\/x.com\/clickstorm_gmbh","https:\/\/www.youtube.com\/channel\/UCEaU1eUbug6OiI4uU6vA-cA"]},{"@type":"Person","@id":"https:\/\/www.clickstorm.de\/blog\/#\/schema\/person\/72317116cc38e22f8d719b8ea642e549","name":"Christoph","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/eaa9279af3270a602b74ca97c706f9bcad88ffee6f4848fd914c08f5e0c4edc3?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/eaa9279af3270a602b74ca97c706f9bcad88ffee6f4848fd914c08f5e0c4edc3?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eaa9279af3270a602b74ca97c706f9bcad88ffee6f4848fd914c08f5e0c4edc3?s=96&d=mm&r=g","caption":"Christoph"},"url":"https:\/\/www.clickstorm.de\/blog\/author\/christoph\/"}]}},"_links":{"self":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/1854","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/comments?post=1854"}],"version-history":[{"count":10,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/1854\/revisions"}],"predecessor-version":[{"id":4506,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/posts\/1854\/revisions\/4506"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media\/1894"}],"wp:attachment":[{"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/media?parent=1854"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/categories?post=1854"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.clickstorm.de\/blog\/wp-json\/wp\/v2\/tags?post=1854"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}