css美化range标签实现拖拽星星变大评分效果代码
代码语言:html
所属分类:星级评分
代码描述:css美化range标签实现拖拽星星变大评分效果代码
代码标签: css 美化 range 标签实 拖拽 星星 变大 评分
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { box-sizing: border-box; background-color: DarkSlateGray; min-height: 100vh; display: grid; place-items: center; text-align: center; font-family: system-ui; color: #f2bf4a; } /* values for each star position */ input[value="0"]::-webkit-slider-runnable-track { --color: #fbdda1; --loc: 7.5%; --scale: scale(.5); --track-scale: 12px; } input[value="25"]::-webkit-slider-runnable-track { --color: #f8ce78; --loc: 30%; --scale: scale(.75); --track-scale: 16px; } input[value="50"]::-webkit-slider-runnable-track { --color: #f2bf4a; --loc: 50%; --scale: scale(1); --track-scale: 20px; } input[value="75"]::-webkit-slider-runnable-track { --color: #f3b933; --loc: 70%; --scale: scale(1.25); --track-scale: 24px; } input[value="100"]::-webkit-slider-runnable-track { --color: #f3b411; --loc: 95%; --scale: scale(1.5); --track-scale: 28px; } div { width: 50%; } p { margin-bottom: 3rem; } input[type=range] { -webkit-appearance: none; width: 100%; background: transparent; transform: rotate(-15deg); } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-run.........完整代码请登录后点击上方下载按钮下载查看
网友评论0