https://codepen.io/brandonmcconnell/pen/Zqjdmg <!DOCTYPE html> <html lang="zh-CN"> <head> <!-- https://codepen.io/brandonmcconnell/pen/Zqjdmg --> <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"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.4.1/css/all.css"> <title>Radio Button Dot-Slider (Pure CSS)</title> <style> html, body { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif; color: #000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } form { width: 90%; max-width: 500px; } form #form-title { font-weight: 400; text-align: center; } form #debt-amount-slider { display: flex; flex-direction: row; align-content: stretch; position: relative; width: 100%; height: 50px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } form #debt-amount-slider:before { content: " "; position: absolute; height: 2px; width: 100%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #000; } form #debt-amount-slider input, form #debt-amount-slider label { box-sizing: border-box; flex: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } form #debt-amount-slider label { position: absolute; width: 20%; height: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } form #debt-amount-slider label:nth-child(2) { left: 0%; } form #debt-amount-slider label:nth-child(4) { left: 20%; } form #debt-amount-slider label:nth-child(6) { left: 40%; } form #debt-amount-slider label:nth-child(8) { left: 60%; } form #debt-amount-slider label:nth-child(10) { left: 80%; } form #debt-amount-slider label:before { content: attr(data-debt-amount); position: absolute; left: 50%; padding-top: 10px; -webkit-transform: translate(-50%, 45px); transform: translate(-50%, 45px); font-size: 14px; letter-spacing: 0.4px; font-weight: 400; white-space: nowrap; opacity: 0.85; transition: all 0.15s ease-in-out; } form #debt-amount-slider label:after { content: " "; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 30px; height: 30px; border: 2px solid #000; background: #fff; border-radius: 50%; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 1; cursor: pointer; transition: all 0.15s ease-in-out; } form #debt-amount-slider label:hover:after { -webkit-transform: translate(-50%, -50%) scale(1.25); transform: translate(-50%, -50%) scale(1.25); } form #debt-amount-slider input { opacity: 0; pointer-events: none; } form #debt-amount-slider input:checked + label:before { font-weight: 800; opacity: 1; } form #debt-amount-slider input:checked + label:after { border-width: 4px; -webkit-transform: translate(-50%, -50%) scale(0.75); transform: translate(-50%, -50%) scale(0.75); } form #debt-amount-slider input:checked ~ #debt-amount-pos { opacity: 1; } form #debt-amount-slider input:checked:nth-child(1) ~ #debt-amount-pos { left: 10%; } form #debt-amount-slider input:checked:nth-child(3) ~ #debt-amount-pos { left: 30%; } form #debt-amount-slider input:checked:nth-child(5) ~ #debt-amount-pos { left: 50%; } form #debt-amount-slider input:checked:nth-child(7) ~ #debt-amount-pos { left: 70%; } form #debt-amount-slider input:checked:nth-child(9) ~ #debt-amount-pos { left: 90%; } form #debt-amount-slider #debt-amount-pos { display: block; position: absolute; top: 50%; width: 12px; height: 12px; background: #000; border-radius: 50%; transition: all 0.15s ease-in-out; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 2px solid #fff; opacity: 0; z-index: 2; } form button { display: block; position: relative; margin: 56px auto 0; padding: 10px 20px; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all 0.15s ease-in-out; font-family: inherit; font-size: 24px; font-weight: 600; background: #fff; border: 2px solid #000; border-radius: 8px; outline: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } form button:hover { background: #000; color: #fff; } form button:hover:active { -webkit-transform: scale(0.9); transform: scale(0.9); } form button:focus { background: #4caf50; border-color: #4caf50; color: #fff; pointer-events: none; } form button:focus:before { -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } form button:before { display: inline-block; width: 0; opacity: 0; content: "\f3f4"; font-family: "Font Awesome 5 Pro"; font-weight: 900; margin-right: 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); } form:valid #debt-amount-slider input + label:before { -webkit-transform: translate(-50%, 45px) scale(0.9); transform: translate(-50%, 45px) scale(0.9); transition: all 0.15s linear; } form:valid #debt-amount-slider input:checked + label:before { -webkit-transform: translate(-50%, 45px) scale(1.1); transform: translate(-50%, 45px) scale(1.1); transition: all 0.15s linear; } form:invalid button { pointer-events: none; opacity: 0.25; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); width: 24px; opacity: 1; margin-right: 12px; } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); width: 24px; opacity: 1; margin-right: 12px; } } @keyframes spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); width: 24px; opacity: 1; margin-right: 12px; } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); width: 24px; opacity: 1; margin-right: 12px; } } </style> </head> <body> <form action="/p/quote.php" method="GET"> <h1 id="form-title">Select Debt Amount</h1> <div id="debt-amount-slider"> <input type="radio" name="debt-amount" id="1" value="1" required> <label for="1" data-debt-amount="< $10k"></label> <input type="radio" name="debt-amount" id="2" value="2" required> <label for="2" data-debt-amount="$10k-25k"></label> <input type="radio" name="debt-amount" id="3" value="3" required> <label for="3" data-debt-amount="$25k-50k"></label> <input type="radio" name="debt-amount" id="4" value="4" required> <label for="4" data-debt-amount="$50k-100k"></label> <input type="radio" name="debt-amount" id="5" value="5" required> <label for="5" data-debt-amount="$100k+"></label> <div id="debt-amount-pos"></div> </div> <button type="submit">Get Debt Free!</button> </form> </body> <script src="http://static.xcabc.com/js/jquery3.0.0.min.js"></script> <script> //no JS necessary $(function () { $('form').submit(function (e) { e.preventDefault(); }); }); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 选择数据范围 喜欢 (0)or分享 (0)
