From 8a1150d3c243588611fec41fe43264818e3eef68 Mon Sep 17 00:00:00 2001
From: Alexander Bluhm <lamiy-develop@live.de>
Date: Sat, 20 Apr 2019 18:53:41 +0200
Subject: [PATCH] Added approach for new select

select tag is styled in a new way
added preview for select tag
---
 index.html           | 7 +++++++
 src/parts/_forms.css | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/index.html b/index.html
index 9fda82a..3edfbc3 100644
--- a/index.html
+++ b/index.html
@@ -73,6 +73,13 @@
       <label for='about'>About me</label>
       <textarea name='about' id='about' placeholder='I am a textarea...'></textarea>
 
+      <label for='drink'>Select your favorite drink</label>
+      <select name='drink' id='drink'>
+        <option value='mojito'>Mojito</option>
+        <option value='water'>Water</option>
+        <option value='lemon'>Lemon juice</option>
+      </select>
+
       <label>Choose a Doe:</label>
       <div>
         <input type='radio' id='john' name='drone' value='john' checked>
diff --git a/src/parts/_forms.css b/src/parts/_forms.css
index 8d95be2..cd5dd3b 100644
--- a/src/parts/_forms.css
+++ b/src/parts/_forms.css
@@ -43,6 +43,12 @@ textarea {
   resize: vertical;
 }
 
+select {
+  background: url("data:image/svg+xml;utf8,<svg fill='#{$form-text}' viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z'/></g></svg>")
+    calc(100% - 12px) 50% / 12px no-repeat var(--background);
+  padding-right: 35px;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {