div+css实现垂直渐变radio单选列表效果代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现垂直渐变radio单选列表效果代码
代码标签: div css 垂直 渐变 radio 单选 列表
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, ::before, ::after { padding: 0; margin: 0; box-sizing: border-box; } :root { --bg-clr: #222; --txt-clr: #f4f4f5; } body { font-family: system-ui; min-height: 100svh; background: var(--bg-clr); color: var(--txt-clr); display: grid; place-content: center; font-size: 1.4rem; font-weight: 300; } .radio-progress { --_incomplete-clr: #666; --_completed-clr: teal; --_completed-border: 2px; --_radio-size: 1rem; display: flex; flex-direction: column; } /* accesible hide radio buttons */ .radio-progress input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .radio-progress > label { position: relative; padding-block: 1rem; display: flex; align-items: center; gap: 1rem; cursor: pointer; } /* text value */ .radio-progress > label > span { transition: all 300ms ease-in-out; } .radio-progress > label::after, .radio-progress > label::before { content: ""; transition: all 300ms ease-in-out; background: var(--_completed-clr); } /* psuedo radio buttons */ .radio-progress > label::before { width: var(--_radio-size); height: var(--_radio-size); border-radius: 50%; box-shadow: 0 0 0 0.4rem var(--bg-clr), 0 0 0 0.5rem var(--_completed-clr); /* this creates the outer line - should become a calculation*/ } /* joining lines (except last) */ .radio-progress > label:not(:last-of-type)::after { position: absolute; z-index: -1; left: calc(var(--_radio-size) / 2 - (var(--_completed-border) / 2)); /* .........完整代码请登录后点击上方下载按钮下载查看
网友评论0