IE fixes and alt-arrow support

alt-down/up is the standard way of opening a select when using a
screen reader. This also fixes the gradient in IE, so now it
displays the right colors. Also added a note about Placeholders.js,
so the placeholders on multi-select boxes will work in IE 9 and
below.

dist/css/select2.css

@@ -207,11 +207,11 @@
   border: 1px solid #aaa;
   border-radius: 4px;
   outline: 0;
-  background-image: -webkit-linear-gradient(top, #ffffff 50%, #eee 100%);
-  background-image: -o-linear-gradient(top, #ffffff 50%, #eee 100%);
-  background-image: linear-gradient(to bottom, #ffffff 50%, #eee 100%);
+  background-image: -webkit-linear-gradient(top, #ffffff 50%, #eeeeee 100%);
+  background-image: -o-linear-gradient(top, #ffffff 50%, #eeeeee 100%);
+  background-image: linear-gradient(to bottom, #ffffff 50%, #eeeeee 100%);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); }
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); }
   .select2-container--classic .select2-selection--single:focus {
     border: 1px solid #5897fb; }
   .select2-container--classic .select2-selection--single .select2-selection__rendered {
@@ -235,11 +235,11 @@
     top: 1px;
     right: 1px;
     width: 20px;
-    background-image: -webkit-linear-gradient(top, #eee 50%, #ccc 100%);
-    background-image: -o-linear-gradient(top, #eee 50%, #ccc 100%);
-    background-image: linear-gradient(to bottom, #eee 50%, #ccc 100%);
+    background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
+    background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
+    background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
     background-repeat: repeat-x;
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ccc', GradientType=0); }
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0); }
     .select2-container--classic .select2-selection--single .select2-selection__arrow b {
       border-color: #888 transparent transparent transparent;
       border-style: solid;
@@ -263,20 +263,20 @@
   border-top: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
-  background-image: -webkit-linear-gradient(top, #ffffff 0%, #eee 50%);
-  background-image: -o-linear-gradient(top, #ffffff 0%, #eee 50%);
-  background-image: linear-gradient(to bottom, #ffffff 0%, #eee 50%);
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
+  background-image: -o-linear-gradient(top, #ffffff 0%, #eeeeee 50%);
+  background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 50%);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); }
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); }
 .select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
-  background-image: -webkit-linear-gradient(top, #eee 50%, #ffffff 100%);
-  background-image: -o-linear-gradient(top, #eee 50%, #ffffff 100%);
-  background-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%);
+  background-image: -webkit-linear-gradient(top, #eeeeee 50%, #ffffff 100%);
+  background-image: -o-linear-gradient(top, #eeeeee 50%, #ffffff 100%);
+  background-image: linear-gradient(to bottom, #eeeeee 50%, #ffffff 100%);
   background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); }
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); }
 .select2-container--classic .select2-selection--multiple {
   background-color: white;
   border: 1px solid #aaa;

dist/js/select2.amd.full.js

@@ -3778,7 +3778,8 @@ define('select2/core',[
           evt.preventDefault();
         }
       } else {
-        if (key === KEYS.ENTER || key === KEYS.SPACE) {
+        if (key === KEYS.ENTER || key === KEYS.SPACE ||
+            ((key === KEYS.DOWN || key === KEYS.UP) && evt.altKey)) {
           self.open();
 
           evt.preventDefault();

dist/js/select2.amd.js

@@ -3778,7 +3778,8 @@ define('select2/core',[
           evt.preventDefault();
         }
       } else {
-        if (key === KEYS.ENTER || key === KEYS.SPACE) {
+        if (key === KEYS.ENTER || key === KEYS.SPACE ||
+            ((key === KEYS.DOWN || key === KEYS.UP) && evt.altKey)) {
           self.open();
 
           evt.preventDefault();

dist/js/select2.full.js

@@ -13313,7 +13313,8 @@ define('select2/core',[
           evt.preventDefault();
         }
       } else {
-        if (key === KEYS.ENTER || key === KEYS.SPACE) {
+        if (key === KEYS.ENTER || key === KEYS.SPACE ||
+            ((key === KEYS.DOWN || key === KEYS.UP) && evt.altKey)) {
           self.open();
 
           evt.preventDefault();

dist/js/select2.js

@@ -4206,7 +4206,8 @@ define('select2/core',[
           evt.preventDefault();
         }
       } else {
-        if (key === KEYS.ENTER || key === KEYS.SPACE) {
+        if (key === KEYS.ENTER || key === KEYS.SPACE ||
+            ((key === KEYS.DOWN || key === KEYS.UP) && evt.altKey)) {
           self.open();
 
           evt.preventDefault();

docs/examples.html

@@ -4,6 +4,7 @@ title: Examples - Select2
 slug: examples
 ---
 
+<script type="text/javascript" src="https://jamesallardice.github.io/Placeholders.js/assets/js/placeholders.jquery.min.js"></script>
 <script type="text/javascript" src="dist/js/i18n/es.js"></script>
 
 <div class="container">
@@ -90,7 +91,9 @@ $(".js-example-basic-multiple").select2();
       </p>
 
       <p>
-        This works for multiple select boxes as well.
+        Select2 uses the <code>placeholder</code> attribute on multiple select
+        boxes, which requires IE 10+. You can support it in older versions with
+        <a href="https://jamesallardice.github.io/Placeholders.js/">the Placeholders.js polyfill</a>.
       </p>
 
       <p>

src/js/select2/core.js

@@ -288,7 +288,8 @@ define([
           evt.preventDefault();
         }
       } else {
-        if (key === KEYS.ENTER || key === KEYS.SPACE) {
+        if (key === KEYS.ENTER || key === KEYS.SPACE ||
+            ((key === KEYS.DOWN || key === KEYS.UP) && evt.altKey)) {
           self.open();
 
           evt.preventDefault();

src/scss/theme/classic/_defaults.scss

@@ -12,7 +12,7 @@ $focus-border-color: #5897fb !default;
 $container-height: 28px !default;
 
 $selection-bg-top-color: white !default;
-$selection-bg-bottom-color: #eee !default;
+$selection-bg-bottom-color: #eeeeee !default;
 
 $container-placeholder-color: #999 !default;
 

src/scss/theme/classic/_single.scss

@@ -45,7 +45,7 @@
 
     width: 20px;
 
-    @include gradient-vertical(#eee, #ccc, 50%, 100%);
+    @include gradient-vertical(#eeeeee, #cccccc, 50%, 100%);
 
     b {
       border-color: #888 transparent transparent transparent;