Fix layout of select2 form widgets

Author: tobias-93

Resources/public/select2/css/select2.custom.css

@@ -1,2 +1,59 @@
 /* For multiple choices, make the field expand */
 .select2-container.select2-container-multi { height: 100%; }
+
+.select2-container {
+  height: 34px;
+  /* force no padding */
+  padding: 0 !important;
+  border: 0px;
+}
+
+.select2-container .select2-choice {
+  height: 34px;
+  line-height: 34px;
+}
+
+.select2-container .select2-choice abbr {
+  background: url('../img/select2.png') right top no-repeat !important;
+}
+
+.select2-container .select2-choice .select2-arrow b {
+  background: url('../img/select2.png') no-repeat 0 1px !important;
+}
+
+.select2-search input {
+  background: #fff url('../img/select2.png') no-repeat 100% -22px !important;
+  background: url('../img/select2.png') no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)) !important;
+  background: url('../img/select2.png') no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%) !important;
+  background: url('../img/select2.png') no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%) !important;
+  background: url('../img/select2.png') no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0 !important;
+}
+
+html[dir="rtl"] .select2-search input {
+  background: #fff url('../img/select2.png') no-repeat -37px -22px !important;
+  background: url('../img/select2.png') no-repeat -37px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)) !important;
+  background: url('../img/select2.png') no-repeat -37px -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%) !important;
+  background: url('../img/select2.png') no-repeat -37px -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%) !important;
+  background: url('../img/select2.png') no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0 !important;
+}
+
+.select2-search input.select2-active {
+  background: #fff url('../img/select2-spinner.gif') no-repeat 100% !important;
+  background: url('../img/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee)) !important;
+  background: url('../img/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%) !important;
+  background: url('../img/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%) !important;
+  background: url('../img/select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0 !important;
+}
+
+.select2-search-choice-close {
+  background: url('../img/select2.png') right top no-repeat !important;
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx)  {
+  .select2-search input,
+  .select2-search-choice-close,
+  .select2-container .select2-choice abbr,
+  .select2-container .select2-choice .select2-arrow b {
+    background-image: url('../img/select2x2.png') !important;
+  }
+}