模拟select – 有爱前端

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://cdn.bootcss.com/meyer-reset/2.0/reset.css" rel="stylesheet"> <title>Select dropdown (Light & Dark)</title> <style> .dropdown { --max-scroll: 8; --text: #3F4656; --border: #2F3545; --borderActive: #23C4F8; --background: #151924; --arrow: #6C7486; --arrowActive: #E4ECFA; --listText: #99A3BA; --listBackground: #F5F9FF; --listActive: #E4ECFA; --listTextActive: #6C7486; --listBorder: none; --textFilled: #99A3BA; width: 220px; position: relative; } .dropdown.light { --text: #CDD9ED; --border: #CDD9ED; --borderActive: #23C4F8; --background: #fff; --arrow: #99A3BA; --arrowActive: #6C7486; --listText: #99A3BA; --listBackground: #fff; --listActive: #F5F9FF; --listTextActive: #6C7486; --listBorder: #E4ECFA; --textFilled: #6C7486; } .dropdown select { display: none; } .dropdown>span { cursor: pointer; padding: 9px 16px; border-radius: 6px; display: block; position: relative; color: var(--text); border: 1px solid var(--border); background: var(--background); transition: all .3s ease; } .dropdown>span:before, .dropdown>span:after { content: ''; display: block; position: absolute; width: 8px; height: 2px; border-radius: 1px; top: 50%; right: 15px; background: var(--arrow); transition: all .3s ease; } .dropdown>span:before { margin-right: 4px; -webkit-transform: scale(0.96, 0.8) rotate(50deg); transform: scale(0.96, 0.8) rotate(50deg); } .dropdown>span:after { -webkit-transform: scale(0.96, 0.8) rotate(-50deg); transform: scale(0.96, 0.8) rotate(-50deg); } .dropdown ul { margin: 0; padding: 0; list-style: none; opacity: 0; visibility: hidden; position: absolute; max-height: calc(var(--max-scroll) * 42px); top: 42px; left: 0; z-index: 1; right: 0; background: var(--listBackground); border-radius: 6px; overflow-x: hidden; overflow-y: auto; -webkit-transform-origin: 0 0; transform-origin: 0 0; transition: opacity 0.2s ease, visibility 0.2s ease, -webkit-transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32), -webkit-transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32); -webkit-transform: scale(0.8) translate(0, 4px); transform: scale(0.8) translate(0, 4px); border: 1px solid var(--listBorder); } .dropdown ul li { opacity: 0; -webkit-transform: translate(6px, 0); transform: translate(6px, 0); transition: all .3s ease; } .dropdown ul li a { cursor: pointer; display: block; padding: 10px 16px; color: var(--listText); text-decoration: none; outline: none; position: relative; transition: all .3s ease; } .dropdown ul li a:hover { color: var(--listTextActive); } .dropdown ul li.active a { color: var(--listTextActive); background: var(--listActive); } .dropdown ul li.active a:before, .dropdown ul li.active a:after { --scale: .6; content: ''; display: block; width: 10px; height: 2px; position: absolute; right: 17px; top: 50%; opacity: 0; background: var(--listText); transition: all .2s ease; } .dropdown ul li.active a:before { -webkit-transform: rotate(45deg) scale(var(--scale)); transform: rotate(45deg) scale(var(--scale)); } .dropdown ul li.active a:after { -webkit-transform: rotate(-45deg) scale(var(--scale)); transform: rotate(-45deg) scale(var(--scale)); } .dropdown ul li.active a:hover:before, .dropdown ul li.active a:hover:after { --scale: .9; opacity: 1; } .dropdown ul li:first-child a { border-radius: 6px 6px 0 0; } .dropdown ul li:last-child a { border-radius: 0 0 6px 6px; } .dropdown.filled>span { color: var(--textFilled); } .dropdown.open>span { border-color: var(--borderActive); } .dropdown.open>span:before, .dropdown.open>span:after { background: var(--arrowActive); } .dropdown.open>span:before { -webkit-transform: scale(0.96, 0.8) rotate(-50deg); transform: scale(0.96, 0.8) rotate(-50deg); } .dropdown.open>span:after { -webkit-transform: scale(0.96, 0.8) rotate(50deg); transform: scale(0.96, 0.8) rotate(50deg); } .dropdown.open ul { opacity: 1; visibility: visible; -webkit-transform: scale(1) translate(0, 12px); transform: scale(1) translate(0, 12px); transition: opacity 0.3s ease, visibility 0.3s ease, -webkit-transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32), -webkit-transform 0.3s cubic-bezier(0.4, 0.6, 0.5, 1.32); } .dropdown.open ul li { opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); } .dropdown.open ul li:nth-child(1) { transition-delay: 80ms; } .dropdown.open ul li:nth-child(2) { transition-delay: 160ms; } .dropdown.open ul li:nth-child(3) { transition-delay: 240ms; } .dropdown.open ul li:nth-child(4) { transition-delay: 320ms; } .dropdown.open ul li:nth-child(5) { transition-delay: 400ms; } .dropdown.open ul li:nth-child(6) { transition-delay: 480ms; } .dropdown.open ul li:nth-child(7) { transition-delay: 560ms; } .dropdown.open ul li:nth-child(8) { transition-delay: 640ms; } .dropdown.open ul li:nth-child(9) { transition-delay: 720ms; } .dropdown.open ul li:nth-child(10) { transition-delay: 800ms; } select { --text: #3F4656; --border: #2F3545; --background: #151924; } select.dropdown { padding: 9px 16px; border-radius: 6px; color: var(--text); border: 1px solid var(--border); background: var(--background); line-height: 22px; font-size: 16px; font-family: inherit; -webkit-appearance: none; } html { box-sizing: border-box; -webkit-font-smoothing: antialiased; } * { box-sizing: inherit; } *:before, *:after { box-sizing: inherit; } .switch { height: 20px; display: block; position: relative; cursor: pointer; } .switch input { display: none; } .switch input+span { padding-left: 38px; min-height: 20px; line-height: 20px; display: block; color: #3F4656; position: relative; white-space: nowrap; } .switch input+span:not(:empty) { padding-left: 46px; } .switch input+span:before, .switch input+span:after { content: ''; display: block; position: absolute; border-radius: 10px; } .switch input+span:before { top: 0; left: 0; width: 38px; height: 20px; border: 1px solid #2F3545; transition: all .3s ease; } .switch input+span:after { width: 14px; height: 14px; background: #2F3545; top: 3px; left: 3px; transition: all .45s ease; } .switch input+span+svg { display: none; } .switch input:checked+span:before { background: #5628EE; border-color: #5628EE; } .switch input:checked+span:after { background: #fff; -webkit-transform: translate(18px, 0); transform: translate(18px, 0); } .switch:hover input:not(:checked)+span:before { border-color: #23C4F8; } body { --bg: #171C28; min-height: 100vh; font-family: 'Mukta Malar', Arial; line-height: 22px; font-size: 16px; color: #ADAFB6; display: flex; justify-content: center; transition: background .3s ease; background: var(--bg); } body.light { --bg: #F5F9FF; } body .switch { position: absolute; bottom: 24px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } body .dropdown { margin-top: 60px; } body .dribbble { position: fixed; display: block; right: 20px; bottom: 20px; } body .dribbble img { display: block; height: 28px; } </style> </head> <body> <a href="https://codepen.io/aaroniker/pen/XxBjKN" target="_blank" rel="noopener noreferrer">https://codepen.io/aaroniker/pen/XxBjKN</a> <select class="dropdown" placeholder="Please choose"> <option>List entry #1</option> <option>List entry #2</option> <option>List entry #3</option> <option>List entry #4</option> </select> <label class="switch"> <input type="checkbox"> <span>Light</span> </label>  <a class="dribbble" href="https://dribbble.com/shots/5430765-Select-dropdown" target="_blank" rel="noopener noreferrer"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a> </body> <script src="http://static.xcabc.com/js/jquery3.0.0.min.js"></script> <script> $('select.dropdown').each(function () { var dropdown = $('<div />').addClass('dropdown selectDropdown'); $(this).wrap(dropdown); var label = $('<span />').text($(this).attr('placeholder')).insertAfter($(this)); var list = $('<ul />'); $(this).find('option').each(function () { list.append($('<li />').append($('<a />').text($(this).text()))); }); list.insertAfter($(this)); if ($(this).find('option:selected').length) { label.text($(this).find('option:selected').text()); list.find('li:contains(' + $(this).find('option:selected').text() + ')').addClass('active'); $(this).parent().addClass('filled'); } }); $(document).on('click touch', '.selectDropdown ul li a', function (e) { e.preventDefault(); var dropdown = $(this).parent().parent().parent(); var active = $(this).parent().hasClass('active'); var label = active ? dropdown.find('select').attr('placeholder') : $(this).text(); dropdown.find('option').prop('selected', false); dropdown.find('ul li').removeClass('active'); dropdown.toggleClass('filled', !active); dropdown.children('span').text(label); if (!active) { dropdown.find('option:contains(' + $(this).text() + ')').prop('selected', true); $(this).parent().addClass('active'); } dropdown.removeClass('open'); }); $('.dropdown > span').on('click touch', function (e) { var self = $(this).parent(); self.toggleClass('open'); }); $(document).on('click touch', function (e) { var dropdown = $('.dropdown'); if (dropdown !== e.target && !dropdown.has(e.target).length) { dropdown.removeClass('open'); } }); // light $('.switch input').on('change', function (e) { $('.dropdown, body').toggleClass('light', $(this).is(':checked')); }); </script> </html>

提示：你可以先修改部分代码再运行。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Drop-down List Effect</title> <style type="text/css"> * { margin: 0; padding: 0; } *, *:after, *:before { box-sizing: border-box; } html { line-height: 1.2; } body { background-color: #f5f5f5; color: #333; font-family: "Roboto", arial, sans-serif; font-size: 16px; } .selected-item { margin: 20px 0; text-align: center; } .selected-item p { font-size: 18px; } .selected-item p span { font-weight: bold; } /* dropdown list */ .dropdown { margin: 20px auto; width: 300px; position: relative; -webkit-perspective: 800px; perspective: 800px; } .dropdown.active .selLabel:after { content: '\25B2'; } .dropdown.active .dropdown-list li:nth-child(1) { top: 60px; } .dropdown.active .dropdown-list li:nth-child(2) { top: 120px; } .dropdown.active .dropdown-list li:nth-child(3) { top: 180px; } .dropdown.active .dropdown-list li:nth-child(4) { top: 240px; } .dropdown > span { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); width: 100%; height: 60px; line-height: 60px; color: #fff; font-size: 18px; letter-spacing: 2px; background: #34495e; display: block; padding: 0 50px 0 30px; position: relative; z-index: 9999; cursor: pointer; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; -webkit-backface-visibility: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .dropdown > span:after { content: '\25BC'; position: absolute; right: 0px; top: 15%; width: 50px; text-align: center; font-size: 12px; padding: 10px; height: 70%; line-height: 24px; border-left: 1px solid #ddd; } .dropdown > span:active { -webkit-transform: rotateX(60deg); transform: rotateX(60deg); } .dropdown > span:active:after { content: '\25B2'; } .dropdown-list { position: absolute; top: 0px; width: 100%; } .dropdown-list li { display: block; list-style: none; left: 0; opacity: 1; -webkit-transition: all 300ms ease; transition: all 300ms ease; position: absolute; width: 100%; } .dropdown-list li:nth-child(1) { background-color: #1abc9c; z-index: 4; top: 0; } .dropdown-list li:nth-child(2) { background-color: #3498db; z-index: 3; top: 3px; } .dropdown-list li:nth-child(3) { background-color: #9b59b6; z-index: 2; top: 6px; } .dropdown-list li:nth-child(4) { background-color: #e67e22; z-index: 1; top: 9px; } .dropdown-list li span { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -webkit-backface-visibility: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; font-size: 18px; line-height: 60px; padding: 0 30px; display: block; color: #fff; cursor: pointer; letter-spacing: 2px; } </style> </head> <body> <div class="container"> <div class="selected-item"> <p>You Selected Country : <span>Empty</span></p> </div> <div class="dropdown"> <span class="selLabel">Select Country</span> <input type="hidden" name="cd-dropdown"> <ul class="dropdown-list"> <li data-value="1"> <span>India</span> </li> <li data-value="2"> <span>Sri Lanka</span> </li> <li data-value="3"> <span>Nepal</span> </li> <li data-value="4"> <span>Bangladesh</span> </li> </ul> </div> </div> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".selLabel").click(function () { $('.dropdown').toggleClass('active'); }); $(".dropdown-list li").click(function() { $('.selLabel').text($(this).text()); $('.dropdown').removeClass('active'); $('.selected-item p span').text($('.selLabel').text()); }); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 模拟select