Added support for input state and feedback.

bootstrap-chosen-mixins.less

@@ -0,0 +1,25 @@
+//
+// bootstrap-chosen-mixins.less
+//
+// An alternate stylesheet for Chosen (http://harvesthq.github.com/chosen/).
+// This one is supposed to integrate better with Bootstrap.
+//
+// Submit bugfixes to: http://github.com/alxlit/bootstrap-chosen
+//
+
+.chosen-control-validation(@text-color: @input-color; @border-color: @input-border; @background-color: @input-bg) {
+  .chosen-single,
+  .chosen-choices {
+    border-color: @border-color;
+    box-shadow: box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  }
+
+  &.chosen-container-active {
+    .chosen-single,
+    .chosen-choices {
+      border-color: darken(@border-color, 10%);
+      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
+      .box-shadow(@shadow);
+    }
+  }
+}

bootstrap-chosen-mixins.scss

@@ -0,0 +1,23 @@
+// bootstrap-chosen-mixins.scss
+//
+// An alternate stylesheet for Chosen (http://harvesthq.github.com/chosen/).
+// This one is supposed to integrate better with Bootstrap.
+//
+// Submit bugfixes to: http://github.com/alxlit/bootstrap-chosen
+//
+
+@mixin chosen-control-validation($text-color: $input-color, $border-color: $input-border, $background-color: $input-bg) {
+  .chosen-single,
+  .chosen-choices {
+    border-color: $border-color;
+    @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  }
+  &.chosen-container-active {
+    .chosen-single,
+    .chosen-choices {
+      border-color: darken($border-color, 10%);
+      $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
+      @include box-shadow($shadow);
+    }
+  }
+}

bootstrap-chosen-variables.less

@@ -20,5 +20,6 @@
 @chosen-focus-transition: ~"border linear .2s, box-shadow linear .2s";
 @chosen-height: @input-height-base;
 @chosen-multi-height: @input-height-base + 6px;
+@chosen-feedback-padding: (@chosen-height * 1.25);
 @chosen-sprite-path: "chosen-sprite.png";
 @chosen-sprite-retina-path: "[email protected]";

bootstrap-chosen-variables.scss

@@ -11,6 +11,7 @@ $chosen-focus-border: 1px solid $input-border-focus !default;
 $chosen-focus-box-shadow: 0 1px 1px rgba(0, 0, 0, .075) inset, 0 0 8px $chosen-border-color !default;
 $chosen-focus-transition: border linear .2s, box-shadow linear .2s !default;
 $chosen-height: $input-height-base !default;
-$chosen-multi-height: $input-height-base + 6px !default;
+$chosen-multi-height: $input-height-base + 6px !default; 
+$chosen-feedback-padding: ($chosen-height * 1.25);
 $chosen-sprite-path: 'chosen-sprite.png' !default;
 $chosen-sprite-retina-path: '[email protected]' !default;

bootstrap-chosen.less

@@ -8,6 +8,7 @@
 //
 
 @import "bootstrap-chosen-variables.less";
+@import "bootstrap-chosen-mixins.less";
 
 .chosen-select { width: 100%; }
 .chosen-select-deselect { width: 100%; }
@@ -124,6 +125,33 @@
       background: url("@{chosen-sprite-path}") no-repeat -22px -3px;
     }
   }
+
+  .has-error & {
+    .chosen-control-validation(@state-danger-text; @state-danger-text; @state-danger-bg);
+  }
+
+  .has-success & { 
+    .chosen-control-validation(@state-success-text; @state-success-text; @state-success-bg);
+  }
+
+  .has-warning & {
+    .chosen-control-validation(@state-warning-text; @state-warning-text; @state-warning-bg);
+  }
+
+
+  .has-feedback & {
+
+    .chosen-choices {
+      padding-right: @chosen-feedback-padding;
+    }
+    span {
+      padding-right: @chosen-feedback-padding - 26px;
+    }
+
+    &.chosen-container-single ~ .form-control-feedback {
+      right: @chosen-feedback-padding - 26px;
+    }
+  }
 }
 
 .chosen-container-single {
@@ -218,6 +246,7 @@
        -moz-background-clip: padding;
             background-clip: padding-box;
   }
+
 }
 
 .chosen-container-single-nosearch {
@@ -441,6 +470,31 @@
     direction: rtl;
     padding: 4px 5px 4px 20px;
   }
+
+  .has-feedback & {
+    ~ .form-control-feedback {
+      left: 0;
+    }
+
+    .chosen-choices,
+    span {
+      padding-right: 0;
+    }
+
+    .chosen-choices {
+      padding-left: @chosen-feedback-padding;
+    }
+
+    &.chosen-container-single {
+      ~ .form-control-feedback {
+        left: @chosen-feedback-padding - 26px;
+      }
+
+      span {
+        padding-left: @chosen-feedback-padding - 26px;
+      }
+    }
+  }
 }
 
 .input-group {
@@ -458,6 +512,7 @@
   }
 }
 
+
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {
   .chosen-rtl .chosen-search input[type="text"],
   .chosen-container-single .chosen-single abbr,

bootstrap-chosen.scss

@@ -8,6 +8,7 @@
 //
 
 @import "bootstrap-chosen-variables";
+@import "bootstrap-chosen-mixins";
 
 .chosen-select { width: 100%; }
 .chosen-select-deselect { width: 100%; }
@@ -124,6 +125,33 @@
       background: url($chosen-sprite-path) no-repeat -22px -3px;
     }
   }
+
+  .has-error & {
+    @include chosen-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
+  }
+
+  .has-success & {
+    @include chosen-control-validation($state-success-text, $state-success-text, $state-success-bg);
+  }
+
+  .has-warning & {
+    @include chosen-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
+  }
+
+  .has-feedback & {
+
+    .chosen-choices {
+      padding-right: $chosen-feedback-padding;
+    }
+    span {
+      padding-right: $chosen-feedback-padding - 26px;
+    }
+
+    &.chosen-container-single ~ .form-control-feedback {
+      right: $chosen-feedback-padding - 26px;
+    }
+  }
+
 }
 
 .chosen-container-single {
@@ -442,6 +470,31 @@
     direction: rtl;
     padding: 4px 5px 4px 20px;
   }
+
+  .has-feedback & {
+    ~ .form-control-feedback {
+      left: 0;
+    }
+
+    .chosen-choices,
+    span {
+      padding-right: 0;
+    }
+
+    .chosen-choices {
+      padding-left: $chosen-feedback-padding;
+    }
+
+    &.chosen-container-single {
+      ~ .form-control-feedback {
+        left: $chosen-feedback-padding - 26px;
+      }
+
+      span {
+        padding-left: $chosen-feedback-padding - 26px;
+      }
+    }
+  }
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {