Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- .dropdown-btn {
- display: none;
- }
- .dropdown-radio > input[type="radio"]:first-child {
- display: none;
- }
- label[for="dropdown-btn"] {
- background: #eee;
- padding: 10px;
- border-radius: 5px;
- display: block;
- cursor: pointer;
- position: relative;
- z-index: 2;
- }
- .dropdown-menu {
- width: 400px;
- overflow: hidden;
- }
- label.dropdown-radio {
- display: block;
- padding: 6px 13px;
- cursor: pointer;
- font-size: 13px;
- color: #333;
- margin-top: -100%;
- transform: scaleY(0);
- transition: margin-top 0.2s ease-in-out, transform 0.3s ease-in-out;
- }
- .dropdown-radios {
- top: -9px;
- position: relative;
- width: calc(100% - 10px);
- margin: auto;
- z-index: 1;
- border-radius: 8px;
- overflow: hidden;
- background: #f5f5f5;
- padding-top: 9px;
- position: relative;
- height: 0;
- }
- .dropdown-btn:checked + label + .dropdown-radios {
- height: auto;
- }
- label.dropdown-radio:hover {
- background: rgba(0,0,0,0.05);
- }
- .dropdown-btn:checked + label + .dropdown-radios > label.dropdown-radio {
- margin-top: 0;
- transform: scaleY(1);
- }
- </style>
- <div class="dropdown-menu">
- <input type="checkbox" class="dropdown-btn" id="dropdown-btn">
- <label for="dropdown-btn">Выберите значение</label>
- <div class="dropdown-radios">
- <label class="dropdown-radio">
- <input type="radio" name="servers" value="1">
- <div class="dropdown-rlabel">1</div>
- </label>
- <label class="dropdown-radio">
- <input type="radio" name="servers" value="2">
- <div class="dropdown-rlabel">2</div>
- </label>
- <label class="dropdown-radio">
- <input type="radio" name="servers" value="3">
- <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>
- </label>
- </div>
- </div>
- <script>
- document.addEventListener('click', function(event) {
- let checkbox = false;
- if(event.target.className.match(/\bdropdown-radio\b/)) (checkbox = event.target.parentNode.parentNode.children[0]).checked = false;
- else if(event.target.parentNode.className.match(/\bdropdown-radio\b/)) (checkbox = event.target.parentNode.parentNode.parentNode.children[0]).checked = false;
- if(checkbox) {
- checkbox.nextElementSibling.innerHTML = (event.target.className.match(/\bdropdown-radio\b/) ? event.target.querySelector('.dropdown-rlabel') : event.target.parentNode.querySelector('.dropdown-rlabel')).innerHTML;
- }
- }, true);
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement