#60 added style for select[multiple]

yegor256 · Apr 19, 2017 · 5d4da21 · 5d4da21
1 parent f721464
commit 5d4da21
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -48,11 +48,9 @@
           <a href="https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fyegor256.github.io%2Ftacit%2F&amp;profile=css3">CSS</a>.
         </p>
         <h2>Forms</h2>
-        <p>
-          Here is a simple form:
-        </p>
         <form method="get" action="#">
           <fieldset>
+            <legend>Here is a simple form:</legend>
             <label for="email">Your email:</label>
             <input name="email" type="text" id="email" size="25" placeholder="must be unique"/>
             <label for="sex">Your gender:</label>
@@ -62,10 +60,20 @@ <h2>Forms</h2>
               <option value="male">male</option>
             </select>
             <label for="sex">Your age:</label>
-            <input type="radio" id="under" name="age"/>
-            <label for="under">I'm under 18</label>
-            <input type="radio" id="over" name="age"/>
-            <label for="over">I'm over 18</label>
+            <input type="radio" id="under" name="age"/> <span>I'm under 18</span>
+            <input type="radio" id="over" name="age"/> <span>I'm over 18</span>
+            <label for="sex">Your favorite food:</label>
+            <select multiple="multiple" name="food">
+              <optgroup label="Italian">
+                <option value="1">Pizza</option>
+                <option value="2">Spaghetti</option>
+              </optgroup>
+              <optgroup label="Asian">
+                <option value="4">Sushi</option>
+              </optgroup>
+              <option value="3">Hamburger</option>
+              <option value="5">Borsht</option>
+            </select>
             <label for="address">Your full address:</label>
             <textarea name="address" id="address" placeholder="PO box is not allowed"></textarea>
             <input type="checkbox" name="consent" id="consent" value="test"/>

diff --git a/scss/_forms.scss b/scss/_forms.scss
@@ -26,6 +26,10 @@ fieldset {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+
+  legend {
+    margin: $em 0;
+  }
 }
 
 input,
@@ -45,6 +49,14 @@ button {
   }
 }
 
+select[multiple] {
+  min-width: 15 * $em;
+}
+
+option {
+  @extend %sans-serif;
+}
+
 textarea {
   min-height: 5 * $em;
   min-width: 20 * $em;
@@ -124,6 +136,7 @@ input[type="checkbox"],
 input[type="radio"] {
   flex-grow: 0;
   height: 1.65 * $em;
+  margin-left: 0;
   margin-right: .5 * $em;
 
   + label {