HTML5 CSS3 SwitchButton 自定义Radio风格
CSS3自定义Radio，把Radio变成左右滑块的方式，采用HTML5 CSS3技术实现的SwitchButton，现在智能手机经常能见到这种效果。
1 <!DOCTYPE html> 2 <!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> 3 <!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]--> 4 <!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]--> 5 <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]--> 6 <head> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <title>CSS3自定义Radio样式 www.srcfans.com </title> 9 <style> 10 html, body, div, span, applet, object, iframe, 11 h1, h2, h3, h4, h5, h6, p, blockquote, pre, 12 a, abbr, acronym, address, big, cite, code, 13 del, dfn, em, img, ins, kbd, q, s, samp, 14 small, strike, strong, sub, sup, tt, var, 15 b, u, i, center, 16 dl, dt, dd, ol, ul, li, 17 fieldset, form, label, legend, 18 table, caption, tbody, tfoot, thead, tr, th, td, 19 article, aside, canvas, details, embed, 20 figure, figcaption, footer, header, hgroup, 21 menu, nav, output, ruby, section, summary, 22 time, mark, audio, video { 23 margin: 0; 24 padding: 0; 25 border: 0; 26 font-size: 100%; 27 font: inherit; 28 vertical-align: baseline; 29 } 30 article, aside, details, figcaption, figure, 31 footer, header, hgroup, menu, nav, section { 32 display: block; 33 } 34 body { 35 line-height: 1; 36 } 37 ol, ul { 38 list-style: none; 39 } 40 blockquote, q { 41 quotes: none; 42 } 43 blockquote:before, blockquote:after, 44 q:before, q:after { 45 content: ''; 46 content: none; 47 } 48 table { 49 border-collapse: collapse; 50 border-spacing: 0; 51 } 52 .about { 53 margin: 80px auto; 54 padding: 8px; 55 width: 260px; 56 font: 10px/18px "Lucida Grande", Tahoma, Verdana, sans-serif; 57 color: #777; 58 text-align: center; 59 text-shadow: 0 1px rgba(255, 255, 255, 0.25); 60 background: #eee; 61 background: rgba(250, 250, 250, 0.8); 62 border-radius: 4px; 63 -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2); 64 box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 0 6px rgba(0, 0, 0, 0.2); 65 background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); 66 background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); 67 background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); 68 background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1)); 69 } 70 .about a { 71 color: #333; 72 text-decoration: none; 73 border-radius: 2px; 74 -webkit-transition: 0.1s; 75 -moz-transition: 0.1s; 76 -o-transition: 0.1s; 77 transition: 0.1s; 78 } 79 .about a:hover { 80 text-decoration: none; 81 background: #fafafa; 82 background: rgba(255, 255, 255, 0.7); 83 } 84 .about-links { 85 height: 30px; 86 } 87 .about-links a { 88 float: left; 89 width: 50%; 90 line-height: 30px; 91 font-size: 12px; 92 } 93 .about-author { 94 margin-top: 5px; 95 } 96 .about-author a { 97 padding: 1px 3px; 98 margin: 0 -1px; 99 } 100 body { 101 font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; 102 color: #404040; 103 background: #3b3f46 url("../img/bg.png") 0 0 repeat; 104 } 105 .container { 106 margin: 0 auto; 107 padding: 90px 0; 108 width: 400px; 109 background-image: -webkit-radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); 110 background-image: -moz-radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); 111 background-image: -o-radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); 112 background-image: radial-gradient(center, farthest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); 113 } 114 .switch { 115 position: relative; 116 margin: 20px auto; 117 height: 26px; 118 width: 120px; 119 background: rgba(0, 0, 0, 0.25); 120 border-radius: 3px; 121 -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); 122 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); 123 } 124 .switch-label { 125 position: relative; 126 z-index: 2; 127 float: left; 128 width: 58px; 129 line-height: 26px; 130 font-size: 11px; 131 color: rgba(255, 255, 255, 0.35); 132 text-align: center; 133 text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45); 134 cursor: pointer; 135 } 136 .switch-label:active { 137 font-weight: bold; 138 } 139 .switch-label-off { 140 padding-left: 2px; 141 } 142 .switch-label-on { 143 padding-right: 2px; 144 } 145 .switch-input { 146 display: none; 147 } 148 .switch-input:checked + .switch-label { 149 font-weight: bold; 150 color: rgba(0, 0, 0, 0.65); 151 text-shadow: 0 1px rgba(255, 255, 255, 0.25); 152 -webkit-transition: 0.15s ease-out; 153 -moz-transition: 0.15s ease-out; 154 -o-transition: 0.15s ease-out; 155 transition: 0.15s ease-out; 156 } 157 .switch-input:checked + .switch-label-on ~ .switch-selection { 158 left: 60px; 159 } 160 .switch-selection { 161 display: block; 162 position: absolute; 163 z-index: 1; 164 top: 2px; 165 left: 2px; 166 width: 58px; 167 height: 22px; 168 background: #65bd63; 169 border-radius: 3px; 170 background-image: -webkit-linear-gradient(top, #9dd993, #65bd63); 171 background-image: -moz-linear-gradient(top, #9dd993, #65bd63); 172 background-image: -o-linear-gradient(top, #9dd993, #65bd63); 173 background-image: linear-gradient(to bottom, #9dd993, #65bd63); 174 -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 175 box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2); 176 -webkit-transition: left 0.15s ease-out; 177 -moz-transition: left 0.15s ease-out; 178 -o-transition: left 0.15s ease-out; 179 transition: left 0.15s ease-out; 180 } 181 .switch-blue .switch-selection { 182 background: #3aa2d0; 183 background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0); 184 background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0); 185 background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0); 186 background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0); 187 } 188 .switch-yellow .switch-selection { 189 background: #c4bb61; 190 background-image: -webkit-linear-gradient(top, #e0dd94, #c4bb61); 191 background-image: -moz-linear-gradient(top, #e0dd94, #c4bb61); 192 background-image: -o-linear-gradient(top, #e0dd94, #c4bb61); 193 background-image: linear-gradient(to bottom, #e0dd94, #c4bb61); 194 } 195 </style> 196 <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 197 </head> 198 <body> 199 <section class="container"> 200 <div class="switch"> 201 <input type="radio" class="switch-input" name="view" value="week" id="week" checked> 202 <label for="week" class="switch-label switch-label-off">Week</label> 203 <input type="radio" class="switch-input" name="view" value="month" id="month"> 204 <label for="month" class="switch-label switch-label-on">Month</label> 205 <span class="switch-selection"></span> 206 </div> 207 <div class="switch switch-blue"> 208 <input type="radio" class="switch-input" name="view2" value="week2" id="week2" checked> 209 <label for="week2" class="switch-label switch-label-off">Week</label> 210 <input type="radio" class="switch-input" name="view2" value="month2" id="month2"> 211 <label for="month2" class="switch-label switch-label-on">Month</label> 212 <span class="switch-selection"></span> 213 </div> 214 </section> 215 </body> 216 </html>
这里不能运行代码，可到这里运行：http://www.srcfans.com/jscode/jscss/3989.shtml
