Advertisement
Guest User

Untitled

a guest
Jul 28th, 2017
54
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.58 KB | None | 0 0
  1. <style>
  2. .dropdown-btn {
  3. display: none;
  4. }
  5.  
  6. .dropdown-radio > input[type="radio"]:first-child {
  7. display: none;
  8. }
  9.  
  10. label[for="dropdown-btn"] {
  11. background: #eee;
  12. padding: 10px;
  13. border-radius: 5px;
  14. display: block;
  15. cursor: pointer;
  16. position: relative;
  17. z-index: 2;
  18. }
  19. .dropdown-menu {
  20. width: 400px;
  21. overflow: hidden;
  22. }
  23.  
  24. label.dropdown-radio {
  25. display: block;
  26. padding: 6px 13px;
  27. cursor: pointer;
  28. font-size: 13px;
  29. color: #333;
  30. margin-top: -100%;
  31. transform: scaleY(0);
  32. transition: margin-top 0.2s ease-in-out, transform 0.3s ease-in-out;
  33. }
  34.  
  35. .dropdown-radios {
  36. top: -9px;
  37. position: relative;
  38. width: calc(100% - 10px);
  39. margin: auto;
  40. z-index: 1;
  41. border-radius: 8px;
  42. overflow: hidden;
  43. background: #f5f5f5;
  44. padding-top: 9px;
  45. position: relative;
  46. height: 0;
  47. }
  48.  
  49. .dropdown-btn:checked + label + .dropdown-radios {
  50. height: auto;
  51. }
  52.  
  53. label.dropdown-radio:hover {
  54. background: rgba(0,0,0,0.05);
  55. }
  56.  
  57. .dropdown-btn:checked + label + .dropdown-radios > label.dropdown-radio {
  58. margin-top: 0;
  59. transform: scaleY(1);
  60. }
  61. </style>
  62. <div class="dropdown-menu">
  63. <input type="checkbox" class="dropdown-btn" id="dropdown-btn">
  64. <label for="dropdown-btn">Выберите значение</label>
  65. <div class="dropdown-radios">
  66. <label class="dropdown-radio">
  67. <input type="radio" name="servers" value="1">
  68. <div class="dropdown-rlabel">1</div>
  69. </label>
  70. <label class="dropdown-radio">
  71. <input type="radio" name="servers" value="2">
  72. <div class="dropdown-rlabel">2</div>
  73. </label>
  74. <label class="dropdown-radio">
  75. <input type="radio" name="servers" value="3">
  76. <div class="dropdown-rlabel"><img src="https://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg" height="50" width="50"></div>
  77. </label>
  78. </div>
  79. </div>
  80. <script>
  81. document.addEventListener('click', function(event) {
  82. let checkbox = false;
  83. if(event.target.className.match(/\bdropdown-radio\b/)) (checkbox = event.target.parentNode.parentNode.children[0]).checked = false;
  84. else if(event.target.parentNode.className.match(/\bdropdown-radio\b/)) (checkbox = event.target.parentNode.parentNode.parentNode.children[0]).checked = false;
  85.  
  86. if(checkbox) {
  87. checkbox.nextElementSibling.innerHTML = (event.target.className.match(/\bdropdown-radio\b/) ? event.target.querySelector('.dropdown-rlabel') : event.target.parentNode.querySelector('.dropdown-rlabel')).innerHTML;
  88. }
  89. }, true);
  90. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement