Add support for standard-compliant placeholder option (#617)

* Add support for standard-compliant placeholder option * Bump version and rebuild files
Choices-js · Oct 22, 2019 · 4a22885 · 4a22885
1 parent 51ac331
commit 4a22885
Show file tree

Hide file tree

Showing 7 changed files with 285 additions and 272 deletions.
diff --git a/assets/scripts/choices.js b/assets/scripts/choices.js
diff --git a/assets/scripts/choices.min.js b/assets/scripts/choices.min.js
diff --git a/assets/styles/base.css b/assets/styles/base.css
@@ -78,8 +78,7 @@ a:focus {
   border-radius: 2.5px;
   font-size: 14px;
   -webkit-appearance: none;
-  -moz-appearance: none;
-       appearance: none;
+  appearance: none;
   margin-bottom: 24px;
 }
 

diff --git a/assets/styles/base.min.css b/assets/styles/base.min.css
diff --git a/assets/styles/choices.css b/assets/styles/choices.css
@@ -19,7 +19,9 @@
 .choices.is-disabled .choices__input {
   background-color: #EAEAEA;
   cursor: not-allowed;
-  user-select: none;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
 }
 
 .choices.is-disabled .choices__item {
@@ -302,7 +304,9 @@
 
 .choices__item--disabled {
   cursor: not-allowed;
-  user-select: none;
+  -webkit-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
   opacity: .5;
 }
 

diff --git a/assets/styles/choices.min.css b/assets/styles/choices.min.css
diff --git a/index.html b/index.html
@@ -157,7 +157,7 @@ <h2>Multiple select input</h2>
       <h2>Single select input</h2>
       <label for="choices-single-default">Default</label>
       <select class="form-control" data-trigger name="choices-single-default" id="choices-single-default" placeholder="This is a search placeholder">
-        <option placeholder>This is a placeholder</option>
+        <option value="">This is a placeholder</option>
         <option value="Choice 1">Choice 1</option>
         <option value="Choice 2">Choice 2</option>
         <option value="Choice 3">Choice 3</option>
@@ -167,12 +167,12 @@ <h2>Single select input</h2>
 
       <label for="choices-single-remote-fetch">Options from remote source (Fetch API)</label>
       <select class="form-control" name="choices-single-remote-fetch" id="choices-single-remote-fetch">
-        <option placeholder>Pick an Arctic Monkeys' record</option>
+        <option value="">Pick an Arctic Monkeys' record</option>
       </select>
 
       <label for="choices-single-remove-xhr">Options from remote source (XHR) &amp; remove button</label>
       <select class="form-control" name="choices-single-remove-xhr" id="choices-single-remove-xhr">
-        <option placeholder>Pick a Smiths' record</option>
+        <option value="">Pick a Smiths' record</option>
       </select>
 
       <label for="choices-single-groups">Option groups</label>