Merge pull request #108 from olgark/master

Update styles for multiple select elements. Add example of small and fieldset element.

dist/dark-legacy.standalone.css

@@ -251,6 +251,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -357,6 +363,19 @@ textarea:disabled {
   color: #a9a9a9;
 }
 
+fieldset {
+  border: 1px #0096bfab solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/dark.css

@@ -230,6 +230,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -318,6 +324,19 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/dark.standalone.css

@@ -195,6 +195,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -283,6 +289,19 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/light-legacy.standalone.css

@@ -251,6 +251,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -357,6 +363,19 @@ textarea:disabled {
   color: #949494;
 }
 
+fieldset {
+  border: 1px #0096bfab solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/light.css

@@ -230,6 +230,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -318,6 +324,19 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

dist/light.standalone.css

@@ -195,6 +195,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -283,6 +289,19 @@ textarea:disabled {
   color: var(--form-placeholder);
 }
 
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
 input[type='range'] {
   margin: 10px 0;
   padding: 10px 0;

index.html

@@ -100,13 +100,33 @@
 
     <h3>Form elements</h3>
     <form>
-      <label for='email'>Email</label>
-      <input
-        type='email'
-        name='email'
-        id='email'
-        placeholder='john.doe@gmail.com'
-      />
+
+      <fieldset>
+        <legend>Fieldset</legend>
+
+        <label for='email'>Email</label>
+        <input
+          type='email'
+          name='email'
+          id='email'
+          placeholder='john.doe@gmail.com'
+        />
+
+        <label for='password'>Password</label>
+        <input
+          type='password'
+          name='password'
+          id='password'
+          placeholder='password'
+        />
+
+        <p>
+          <input type='checkbox' name='remember' id='remember' checked />
+          <label for='remember'>Remember me</label>
+        </p>
+
+        <input type='submit' />
+      </fieldset>
 
       <label for='id'>User id (read only)</label>
       <input readonly name='id' id='id' value='04D6H89Z' />
@@ -133,11 +153,9 @@
         <option value='lemon'>Lemon juice</option>
       </select>
 
-      <br />
-
       <label for='drinks'>Or select multiple favorite drinks</label>
-      <p>Hold down the Ctrl (windows) /  
-        Command (Mac) button to select multiple options.</p> 
+      <br/>
+      <small>Hold down the Ctrl (Windows) /  Command (Mac) button to select multiple options. (P.S. this message is inside a <code>&lt;small&gt;</code> tag!</small>) 
       <select name='drink' id='drinks' multiple>
         <option value='mojito'>Mojito</option>
         <option value='water'>Water</option>
@@ -168,11 +186,6 @@
         <label for='volume'>Volume</label>
         <input type='range' id='start' name='volume' id='volume' min='0' max='11' />
       </div>
-
-      <input type='checkbox' name='remember' id='remember' checked />
-      <label for='remember'>Remember me</label>
-
-      <input type='submit' />
     </form>
 
     <h3>Code</h3>

src/parts/_forms.css

@@ -54,6 +54,12 @@ select::-ms-expand {
   display: none;
 }
 
+select[multiple] {
+  padding-right: 10px;
+  background-image: none;
+  overflow-y: auto;
+}
+
 button,
 input[type='submit'],
 input[type='button'] {
@@ -128,4 +134,17 @@ textarea:disabled {
 
 ::placeholder {
   color: var(--form-placeholder);
+}
+
+fieldset {
+  border: 1px var(--focus) solid;
+  border-radius: 6px;
+  margin: 0;
+  margin-bottom: 6px;
+  padding: 10px;
+}
+
+legend {
+  font-size: 0.9em;
+  font-weight: 600;
 }