css美化radio实现星级评分效果代码
代码语言:html
所属分类:星级评分
代码描述:css美化radio实现星级评分效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { background-color: #fff; font-family: Lato, Helvetica, Arial, sans-serif; font-weight: 400; color: #666; } a { color: #27ae60; } a:focus, a:hover, a:visited { color: #36d278; } form { margin: 0 auto 3rem; } form:first-of-type { margin-top: 3rem; } fieldset { margin: 0 auto; } legend { margin-bottom: 0.5rem; } input[type=radio] { border: 3px solid black; } .rating { display: block; position: relative; width: 150px; min-height: 60px; padding: 0; border: none; } .rating > input { position: absolute; margin-right: -100%; opacity: 0; } .rating > input:checked ~ label, .rating > input:focus ~ label { background-position: 0 0; } .rating > input:checked + label, .rating > input:focus + label { background-position: 0 -30px; } .rating > input:hover ~ label { background-position: 0 0; } .rating > input:hover + label { background-position: 0 -30px; } .rating > input:hover + label:before { opacity: 1; } .rating > input:focus + label { outline: 1px dotted #999; } .rating .focus-ring { position: absolute; left: 0; width: 100%; height: 30px; outline: 2px dotted #999; pointer-events: none; opacity: 0; } .rating > .input-no-rate:focus ~ .focus-ring { opacity: 1; } .rating > label { position: relative; float: left; width: 30px; font-size: 0.1em; color: transparent; cursor: pointer; background-repeat: no-repeat; background-position: 0 -30px; } .rating > label, .rating > label:before { height: 30px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII="); } .star > label:before { content: ""; position: absolute; display: block; background-position: 0 30px; pointer-events: none; opacity: 0; } .star > label:nth-of-type(5):before { width: 120px; left: -120px; } .star > label:nth-of-type(4):before { width: 90px; left: -90px; } .star > label:nth-of-type(3):before { width: 60px; left: -60px; } .star > label:nth-of-type(2):before { width: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0