You are here

Home » API reference » Multiselect 8

multiselect.css in Multiselect 8

Same filename and directory in other branches
  1. 2.x css/multiselect.css

Styles for the multiselect module.

File

css/multiselect.css
View source 
  1. /**

  2.  * @file

  3.  * Styles for the multiselect module.

  4.  */

  5. 

  6. .multiselect-wrapper:after {

  7.   content: "";

  8.   display: table;

  9.   clear: both;

  10. }

  11. 

  12. .multiselect-wrapper select.form-multiselect {

  13.   padding: 2px;

  14.   width: 250px;

  15.   border: 1px solid #ccc;

  16.   border-top-color: #999;

  17.   background: #fff;

  18.   color: #333;

  19. }

  20. 

  21. .multiselect-wrapper select.form-multiselect:focus {

  22.   border-color: #ace;

  23.   color: #000;

  24. }

  25. .multiselect-wrapper label {

  26.   color: #999;

  27.   font-weight: bold;

  28. }

  29. div.multiselect-available,

  30. div.multiselect-selected {

  31.   float: left;

  32.   width: 250px;

  33. }

  34. [dir="rtl"] div.multiselect-available,

  35. [dir="rtl"] div.multiselect-selected {

  36.   float: right;

  37. }

  38. .form-disabled select.form-multiselect {

  39.   background-color: #eee;

  40.   color: #777;

  41. }

  42. .multiselect-btns > ul {

  43.   float: left;

  44.   margin: 10px 10px 0 20px;

  45.   padding: 0;

  46.   list-style: none;

  47. }

  48. [dir="rtl"] .multiselect-btns > ul {

  49.   float: right;

  50.   margin: 10px 20px 0 10px;

  51. }

  52. .multiselect-btns > ul > li.multiselect-add,

  53. .multiselect-btns > ul > li.multiselect-remove {

  54.   display: block;

  55.   overflow: hidden;

  56.   margin: 0;

  57.   padding: 0;

  58.   width: 33px;

  59.   height: 38px;

  60.   background: url(../images/remove.png) no-repeat 0 0;

  61.   text-indent: -9999px;

  62. }

  63. [dir="rtl"] .multiselect-btns > ul > li.multiselect-add,

  64. [dir="rtl"] .multiselect-btns > ul > li.multiselect-remove {

  65.   background: url(../images/remove-rtl.png) no-repeat 0 0;

  66. }

  67. .multiselect-btns > ul > li.multiselect-add {

  68.   margin-bottom: 15px;

  69.   background: url(../images/add.png) no-repeat 0 0;

  70. }

  71. [dir="rtl"] .multiselect-btns > ul > li.multiselect-add {

  72.   background: url(../images/add-rtl.png) no-repeat 0 0;

  73. }

  74. .multiselect-btns > ul > li.multiselect-add:hover,

  75. .multiselect-btns > ul > li.multiselect-remove:hover {

  76.   background-position: -33px 0;

  77. }

  78. .multiselect-btns > ul > li.multiselect-add:active,

  79. .multiselect-btns > ul > li.multiselect-remove:active {

  80.   background-position: -66px 0;

  81. }

  82. 

  83. /* Responsive Styles */

  84. 

  85. @media screen and (max-width: 991px) {

  86. 

  87.   .multiselect-wrapper select.form-multiselect {

  88.     width: 100%;

  89.   }

  90.   div.multiselect-available,

  91.   div.multiselect-selected {

  92.     float: none;

  93.     width: 100%;

  94.   }

  95.   .multiselect-btns > ul {

  96.     float: none;

  97.     display: flex;

  98.     position: relative;

  99.     left: 35%;

  100.     top: 10px;

  101.   }

  102.   .multiselect-available.form-multiselect option,

  103.   .multiselect-selected.form-multiselect option {

  104.     padding: 15px;

  105.   }

  106.   .multiselect-btns > ul > li.multiselect-add {

  107.     background: url(../images/add-mobile.png) no-repeat 0 0;

  108.   }

  109.   .multiselect-btns > ul > li.multiselect-remove {

  110.     background: url(../images/remove-mobile.png) no-repeat 0 0;

  111.   }

  112.   .multiselect-btns > ul > li.multiselect-add,

  113.   .multiselect-btns > ul > li.multiselect-remove {

  114.     margin-right: 50px;

  115.     width: 35px;

  116.   }

  117. }