<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style type="text/css" media="screen"> /*关键点：float: right -webkit-appearance: none :checked 选择符 同级元素选择符 ~*/ .demo{ float: left; } .demo input{ float: right; margin: 0; width: 44px; height: 44px; border: 0 none; outline: none; -webkit-appearance: none; /*remove default style*/ -webkit-tap-highlight-color: rgba(0,0,0,0); background: url(a.png) 0 -44px no-repeat; opacity: .3; transition: all 100ms linear; } .demo input:hover, .demo input:hover ~ input{ opacity: 1; } .demo input:checked, .demo input:checked ~ input{ background-position: 0 0; opacity: 1; } </style> </head> <body> <div class="demo"> <input type="radio" name="star" value="" placeholder=""> <input type="radio" name="star" value="" placeholder=""> <input type="radio" name="star" value="" placeholder=""> <input type="radio" name="star" value="" placeholder=""> <input type="radio" name="star" value="" placeholder=""> </div> </body> </html>
