CSS3实现的多种复选框和单选按钮美化效果源码.zip资源-CSDN文库

共2个文件

html：1个

css：1个

版权申诉

css3

105 浏览量 2022-11-02 23:35:22 上传评论收藏 2KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

CSS3实现的多种复选框和单选按钮美化效果源码.zip （2个子文件）

132686877062013026

style2.css 3KB

index.html 3KB

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3复选框和单选按钮美化css代码</title> <link rel="stylesheet" type="text/css" href="style2.css" /> </head> <body> <div id="holder"> <div> <div class="tag">Checkbox 小</div> <input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label> 选项1 <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label> 选项2 <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label> 选项3 <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label> 选项4 </div> <div> <div class="tag">Checkbox 大</div> <input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label> 选项1 <input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" /><label for="checkbox-2-2"></label> 选项2 <input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" /><label for="checkbox-2-3"></label> 选项3 <input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox" /><label for="checkbox-2-4"></label> 选项4 </div> <div> <div class="tag">Radio 小</div> <div class="button-holder"> <input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked /><label for="radio-1-1"></label> 选项1<br /> <input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" /><label for="radio-1-2"></label> 选项2<br /> <input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" /><label for="radio-1-3"></label> 选项3<br /> <input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" /><label for="radio-1-4"></label> 选项4<br /> </div> </div> <div> <div class="tag">Radio 大</div> <div class="button-holder"> <input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label> 选项1<br /> <input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label> 选项2<br /> <input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" checked /><label for="radio-2-3"></label> 选项3<br /> <input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-4"></label> 选项4<br /> <input type="radio" id="radio-2-5" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-5"></label> 选项5<br /> </div> </div> </div> </body> </html>

评论收藏

内容反馈

版权申诉