div+css实现checkbox划线勾选列表效果代码
代码语言:html
所属分类:表单美化
代码描述:div+css实现checkbox划线勾选列表效果代码
代码标签: div css checkbox 划线 勾选 列表
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/open-props.normalize.min.css"> <style> body { display: grid; place-items: center; min-height: 100vh; } input { accent-color: var(--green-8); } li { display: flex; gap: var(--size-2); } ul { box-shadow: var(--shadow-5); padding: var(--size-4); border-radius: var(--radius-3); border: 2px solid var(--text-2); list-style-type: none; display: grid; gap: var(--size-2); background: var(--surface-1); transition: all 0.2s ease; } /* The double negative approach */ ul:not(:has(input:not(:checked))) { background: var(--green-1); border-color:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0