css美化range拖动滑竿取值器代码
代码语言:html
所属分类:表单美化
代码描述:css美化range拖动滑竿取值器代码,加上拖动滑竿背景色变化,滑竿图表美化变得更加精美精细,将传统的range改造成竖形滑竿。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> * { border:0; box-sizing:border-box; margin:0; padding:0 } :root { font-size:calc(48px+24 *(100vw - 320px) /(1280 - 320)) } body,form { display:flex } body,input { font:1em/1.5 sans-serif } body { --l1:hsl(228,9.8%,100%); --l2:hsl(228,9.8%,90%); --l3:hsl(228,9.8%,63%); --p:hsl(120,90.4%,44.9%); --pT:hsla(120,90.4%,44.9%,0); background-color:var(--l2); height:100vh } form,input[type=range] { margin:auto } form { height:6em } input[type=range],label { -webkit-tap-highlight-color:transparent } input[type=range] { background-color:transparent; border-radius:.75em; box-shadow:-0.1em -0.1em .1em var(--l3) inset,0.1em .1em .1em var(--l1) inset; cursor:pointer; transform:rotate(-90deg); height:1.5em; width:6em; -webkit-appearance:none; -moz-appearance:none; appearance:none } input[type=range]:focus { outline:transparent } input[type=range]::-webkit-slider-thumb { border:0; background:linear-gradient(var(--p),var(--p)) 70% 50%/20% 5% no-repeat,linear-gradient(var(--l2),var(--l2)) 70% 50%/20% 15% no-repeat,radial-gradient(100% 100% at 50% 50%,var(--pT) 14%,var(--p) 15% 19%,var(--pT) 20%),var(--l2); border-radius:50%; box-shadow:-0.25em 0 .5em var(--l3),0.25em 0 .5em var(--l1); width:1.5em; height:1.5em; -webkit-appearance:none; -moz-appearance:none; appearance:none } input[type=range]::-moz-range-thumb { border:0; background:linear-gradient(var(--p),var(--p)) 70% 50%/20% 5% no-repeat,linear-gradient(var(--l2),var(--l2)) 70% 50%/20.........完整代码请登录后点击上方下载按钮下载查看
网友评论0