js+css实现星级打分评分选择表单提交效果代码
代码语言:html
所属分类:星级评分
代码描述:js+css实现星级打分评分选择表单提交效果代码
代码标签: js css 星级 打分 评分 选择 表单 提交
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/pico.min.css"> <style> @charset "UTF-8"; .rating { container: component/inline-size; position: relative; display: flex; flex-direction: row-reverse; justify-content: center; gap: 0; } .rating > input { opacity: 0; position: absolute; bottom: 25%; } .rating > input:checked ~ label:before { opacity: 1; } .rating > label { position: relative; font-size: 20cqw; margin: 0; color: #ffd700; cursor: pointer; } .rating > label::before { content: "★"; position: absolute; opacity: 0; transition: opacity 225ms; } .rating:hover > input:checked ~ label:before { opacity: 0.4; } .rating > label:hover:before, .rating > label:hover ~ label:before { opacity: 1 !important; } /* pen environnment styling */ body { background: linear-gradient(45deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%); height: 100dvh; width: 100dvw; max-width: 100dvw; display: table-cell; vertical-align: middle; } .container { max-width: 900px; margin: 0 auto; } form .row { display: flex; gap: 1em; } #output { box-sizing: border-box; } #output:not(:empty) { padding: 1em; background: rgba(0, 0, 0, 0.5); color: #0f0; } #output.error { color: #f00; } </style> </head> <body> <form action="/" method="post" class="container"> <div class="rating"> <input required type="radio" name="rating" value="5" id="5"><label for="5">☆</label> <input required type="radio" name="rating" value="4" id="4&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0