From 5ee06f90bafd1406e181316708544cc2b323ac3d Mon Sep 17 00:00:00 2001
From: Casey Holzer <casey17648@gmail.com>
Date: Thu, 18 Feb 2016 12:59:23 -0700
Subject: [PATCH] add bs-placeholder for advanced styling

close #1139, close #1190
---
 js/bootstrap-select.js     | 9 +++++++++
 less/bootstrap-select.less | 4 ++++
 less/variables.less        | 3 +++
 sass/bootstrap-select.scss | 4 ++++
 sass/variables.scss        | 3 +++
 5 files changed, 23 insertions(+)

diff --git a/js/bootstrap-select.js b/js/bootstrap-select.js
index 7a800b0cf..7c70555a4 100644
--- a/js/bootstrap-select.js
+++ b/js/bootstrap-select.js
@@ -643,6 +643,8 @@
           that.setDisabled(index, this.disabled || this.parentNode.tagName === 'OPTGROUP' && this.parentNode.disabled, $lis);
           that.setSelected(index, this.selected, $lis);
         });
+
+        this.togglePlaceholder();
       }
 
       this.tabIndex();
@@ -990,6 +992,8 @@
     },
 
     setSelected: function (index, selected, $lis) {
+      if (!$lis) this.togglePlaceholder(); // check if setSelected is being called by changing the value of the select
+
       if (!$lis) {
         $lis = this.findLis().eq(this.liObj[index]);
       }
@@ -1035,6 +1039,11 @@
       });
     },
 
+    togglePlaceholder: function () {
+      var value = this.$element.val();
+      this.$button.toggleClass('bs-placeholder', value === null || value === '');
+    },
+
     tabIndex: function () {
       if (this.$element.data('tabindex') !== this.$element.attr('tabindex') && 
         (this.$element.attr('tabindex') !== -98 && this.$element.attr('tabindex') !== '-98')) {
diff --git a/less/bootstrap-select.less b/less/bootstrap-select.less
index 78d7812b8..608047111 100644
--- a/less/bootstrap-select.less
+++ b/less/bootstrap-select.less
@@ -19,6 +19,10 @@ select.selectpicker {
     width: 100%;
     padding-right: 25px;
     z-index: 1;
+
+    &.bs-placeholder,
+    &.bs-placeholder:hover,
+    &.bs-placeholder:active { color: @input-color-placeholder; }
   }
 
   > select {
diff --git a/less/variables.less b/less/variables.less
index 710d5c9ea..2514a85b7 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -4,3 +4,6 @@
 @width-default: 220px; // 3 960px-grid columns
 
 @zindex-select-dropdown: 1060; // must be higher than a modal background (1050)
+
+//** Placeholder text color
+@input-color-placeholder: #999;
\ No newline at end of file
diff --git a/sass/bootstrap-select.scss b/sass/bootstrap-select.scss
index 98934207b..90a6329fa 100644
--- a/sass/bootstrap-select.scss
+++ b/sass/bootstrap-select.scss
@@ -44,6 +44,10 @@ select.selectpicker {
     width: 100%;
     padding-right: 25px;
     z-index: 1;
+
+    &.bs-placeholder,
+    &.bs-placeholder:hover,
+    &.bs-placeholder:active { color: $input-color-placeholder; }
   }
 
   > select {
diff --git a/sass/variables.scss b/sass/variables.scss
index f5bdf0aca..8ba1fc0f1 100644
--- a/sass/variables.scss
+++ b/sass/variables.scss
@@ -4,3 +4,6 @@ $color-grey-arrow: rgba(204, 204, 204, 0.2);
 $width-default: 220px; // 3 960px-grid columns
 
 $zindex-select-dropdown: 1060; // must be higher than a modal background (1050)
+
+//** Placeholder text color
+$input-color-placeholder: #999;
\ No newline at end of file