Guest User

Untitled

a guest
Jan 22nd, 2020
62
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <ul>
  2.     <li>
  3.         <input type="checkbox" value="foo">
  4.         foo
  5.         <div class="custom-multiselect "></div>
  6.     </li>
  7.     <li>...</li>
  8.     <li>...</li>
  9.     <li>...</li>
  10.     <li>...</li>
  11.     <li>...</li>
  12.     <li>...</li>   
  13. </ul>
  14.  
  15. // Custom css for multiple dropdown
  16. li {
  17.   position: relative;
  18.   display: inline-block;
  19.  
  20.   input {
  21.     position : absolute;
  22.     z-index : -1;
  23.     opacity : 0;
  24.  
  25.     &:checked ~ & {
  26.      background : black;
  27.     }
  28.  
  29.     &:disabled ~ & {
  30.      opacity : 0.6;
  31.       pointer-events : none;
  32.     }
  33.   }
  34. }
  35.  
  36. .custom-multiselect {
  37.   position : absolute;
  38.   top : 10px;
  39.   left : 15px;
  40.   height : 20px;
  41.   width : 20px;
  42.   background : white;
  43.   border: 1px solid $black;
  44.  
  45.   &:after {
  46.    content: ' ';
  47.     position: absolute;
  48.     display: none;
  49.  
  50.     li & {
  51.      left : 8px;
  52.       top : 4px;
  53.       width : 3px;
  54.       height : 8px;
  55.       border : solid white;
  56.       border-width : 0 2px 2px 0;
  57.       transform : rotate(45deg);
  58.     }
  59.   }
  60. }
RAW Paste Data