老式收音机线性radio按钮效果
代码语言:html
所属分类:表单美化
代码描述:老式收音机线性radio按钮效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #e3e4e8; --fg: #17181c; --transDur: 0.1s; font-size: calc(20px + (40 - 20)*(100vw - 320px)/(2560 - 320)); } body, form { display: flex; } body, input { color: var(--fg); font: 1em/1.5 Helvetica, sans-serif; } body { background-color: var(--bg); background-image: linear-gradient(90deg,#0000003f,transparent); height: 100vh; } form, label { width: 100%; } form { margin: auto; max-width: 24em; padding: 0 1.5em; } label { display: block; text-align: center; -webkit-tap-highlight-color: transparent; } label:first-child input { border-radius: 0.5em 0 0 0.5em; box-shadow: 0.1em 0 0 #2726267f inset, -0.1em 0 0 #27262600 inset, 0 0.1em 0 #afa490 inset, 0 -0.1em 0 #ffffff3f, 0 0.2em 0.5em #0000007f, 0 -0.1em 0 #926086 inset, -0.1em -0.2em 0 #ffffff7f inset, 0.2em 0 0 #ffffff7f inset; } label:last-child input { border-radius: 0 0.5em 0.5em 0; box-shadow: 0 -0.1em 0 #926086 inset, 0.1em 0 0 #2726267f inset, -0.1em 0 0 #2726267f inset, 0 0.1em 0 #afa490 inset, -0.1em 0 0 #afa490 inset, 0 -0.1em 0 #ffffff3f, 0 0.2em 0.5em #0000007f, -0.1em -0.1em 0 0.1em #ffffff7f inset; } label:first-child input:checked { box-shadow: 0.1em 0 0 #272626af inset, -0.1em 0 0 #272626 inset, 0 0.1em 0 #847a62 inset, 0 -0.1em 0 #ffffff3f, 0 0.1em 0 #ffffff7f, 0 -0.1em 0 #722257 inset, -0.1em -0.2em 0 #ffffff7f inset, 0.2em 0 0 #ffffff7f inset; } label:last-child input:checked { box-shadow: 0.1em 0 0 #272626af inset, -0.1em 0 0 #272626 inset, 0 -0.1em 0 #722257 inset, 0 0.1em 0 #847a62 inset, -0.1em 0 0 #847a62 inset, 0 -0.1em 0 #ffffff3f, 0 0.1em 0 #ffffff7f, -0.1em -0.1em 0 0.1em #ffffff7f inset; } input { background-image: linear-gradient(#ffffff 33%,#414751 58%,#837b52,#c5baa1,#c3adaa); border-radius: 0; box-shadow: 0.1em 0 0 #2726267f inset, -0.1em 0 0 #27262600 inset, 0 0.1em 0 #afa490 inset, 0 -0.1em 0 #ffffff3f, 0 0.2em 0.5em #0000007f, 0 -0.1em 0 #926086 inset, -0.1em -0.2em 0 #ffffff7f inset; cursor: pointer; display: block; margin-bottom: 0.5em; width: 100%; height: 1em; transition: box-shadow var(--transDur) ease-in-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; } input:checked { background-image: linear-gradient(#ffffff 33%,#414751 58%,#827a7b,#c0b6ac,#c3adaa); box-shadow: 0.1em 0 0 #272626af inset, -0.1em 0 0 #272626 inset, 0 0.1em 0 #847a62 inset, 0 -0.1em 0 #ffffff3f, 0 0.1em 0 #ffffff7f, 0 -0.1em 0 #722257 ins.........完整代码请登录后点击上方下载按钮下载查看
网友评论0