html

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.  
  5. <title>纯CSS3实现自定义美化复选框和单选框</title>
  6. <link rel="stylesheet" type="text/css" href="style2.css" />
  7.  
  8. </head>
  9. <body>
  10.  
  11. <div id="holder">
  12.     <div>
  13.         <div class="tag">Checkbox Small</div>
  14.         <input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
  15.         <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label>
  16.         <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label>
  17.         <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>
  18.     </div>
  19.     <div>
  20.         <div class="tag">Checkbox Big</div>
  21.         <input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label>
  22.         <input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" /><label for="checkbox-2-2"></label>
  23.         <input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" /><label for="checkbox-2-3"></label>
  24.         <input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox" /><label for="checkbox-2-4"></label>
  25.     </div>
  26.     <div style="text-align:center;clear:both;margin:10px 0">
  27. <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
  28. <script src="/follow.js" type="text/javascript"></script>
  29. </div>
  30.     <div>
  31.         <div class="tag">Radio Small</div>
  32.         <div class="button-holder">
  33.             <input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked /><label for="radio-1-1"></label><br />
  34.             <input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" /><label for="radio-1-2"></label><br />
  35.             <input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" /><label for="radio-1-3"></label><br />
  36.             <input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" /><label for="radio-1-4"></label><br />
  37.         </div>
  38.     </div>
  39.     <div>
  40.         <div class="tag">Radio Big</div>
  41.         <div class="button-holder">
  42.             <input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label><br />
  43.             <input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label><br />
  44.             <input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" checked /><label for="radio-2-3"></label><br />
  45.             <input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-4"></label><br />
  46.             <input type="radio" id="radio-2-5" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-5"></label><br />
  47.         </div>
  48.     </div>
  49. </div>
  50. </body>
  51. </html>

css

  1. body {
  2.     background: #fff;
  3.     padding:; margin:;
  4. }
  5.  
  6. #holder {
  7.     width: 100%;
  8. }
  9.  
  10. #holder > div {
  11.     clear: both;
  12.     padding: 2%;
  13.     margin-bottom: 20px;
  14.     border-bottom: 1px solid #eee;
  15.     float: left;
  16.     width: 96%;
  17. }
  18.  
  19. label {
  20.     display: inline;
  21. }
  22.  
  23. .regular-checkbox {
  24.     display: none;
  25. }
  26.  
  27. .regular-checkbox + label {
  28.     background-color: #fafafa;
  29.     border: 1px solid #cacece;
  30.     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  31.     padding: 9px;
  32.     border-radius: 3px;
  33.     display: inline-block;
  34.     position: relative;
  35. }
  36.  
  37. .regular-checkbox + label:active, .regular-checkbox:checked + label:active {
  38.     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  39. }
  40.  
  41. .regular-checkbox:checked + label {
  42.     background-color: #e9ecee;
  43.     border: 1px solid #adb8c0;
  44.     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
  45.     color: #99a1a7;
  46. }
  47.  
  48. .regular-checkbox:checked + label:after {
  49.     content: '\2714';
  50.     font-size: 14px;
  51.     position: absolute;
  52.     top: 0px;
  53.     left: 3px;
  54.     color: #99a1a7;
  55. }
  56.  
  57. .big-checkbox + label {
  58.     padding: 18px;
  59. }
  60.  
  61. .big-checkbox:checked + label:after {
  62.     font-size: 28px;
  63.     left: 6px;
  64. }
  65.  
  66. .tag {
  67.     font-family: Arial, sans-serif;
  68.     width: 200px;
  69.     position: relative;
  70.     top: 5px;
  71.     font-weight: bold;
  72.     text-transform: uppercase;
  73.     display: block;
  74.     float: left;
  75. }
  76.  
  77. .radio-1 {
  78.     width: 193px;
  79. }
  80.  
  81. .button-holder {
  82.     float: left;
  83. }
  84.  
  85. /* RADIO */
  86.  
  87. .regular-radio {
  88.     display: none;
  89. }
  90.  
  91. .regular-radio + label {
  92.     -webkit-appearance: none;
  93.     background-color: #fafafa;
  94.     border: 1px solid #cacece;
  95.     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  96.     padding: 9px;
  97.     border-radius: 50px;
  98.     display: inline-block;
  99.     position: relative;
  100. }
  101.  
  102. .regular-radio:checked + label:after {
  103.     content: ' ';
  104.     width: 12px;
  105.     height: 12px;
  106.     border-radius: 50px;
  107.     position: absolute;
  108.     top: 3px;
  109.     background: #99a1a7;
  110.     box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
  111.     text-shadow: 0px;
  112.     left: 3px;
  113.     font-size: 32px;
  114. }
  115.  
  116. .regular-radio:checked + label {
  117.     background-color: #e9ecee;
  118.     color: #99a1a7;
  119.     border: 1px solid #adb8c0;
  120.     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
  121. }
  122.  
  123. .regular-radio + label:active, .regular-radio:checked + label:active {
  124.     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
  125. }
  126.  
  127. .big-radio + label {
  128.     padding: 16px;
  129. }
  130.  
  131. .big-radio:checked + label:after {
  132.     width: 24px;
  133.     height: 24px;
  134.     left: 4px;
  135.     top: 4px;
  136. }
  137.  
  138. /* ------- IGNORE */
  139.  
  140. #header {
  141.     width: 100%;
  142.     margin: 0px auto;
  143. }
  144.  
  145. #header #center {
  146.     text-align: center;
  147. }
  148.  
  149. #header h1 span {
  150.     color: #000;
  151.     display: block;
  152.     font-size: 50px;
  153. }
  154.  
  155. #header p {
  156.     font-family: 'Georgia', serif;
  157. }
  158. #header h1 {
  159.     color: #892dbf;
  160.     font: bold 40px 'Bree Serif', serif;
  161. }
  162.  
  163. #travel {
  164.     padding: 10px;
  165.     background: rgba(0,0,0,0.6);
  166.     border-bottom: 2px solid rgba(0,0,0,0.2);
  167.     font-variant: normal;
  168.     text-decoration: none;
  169.     margin-bottom: 20px;
  170. }
  171.  
  172. #travel a {
  173.     font-family: 'Georgia', serif;
  174.     text-decoration: none;
  175.     border-bottom: 1px solid #f9f9f9;
  176.     color: #f9f9f9;
  177. }

效果

纯CSS美化的checkbox 和 radio的更多相关文章

  1. 用纯CSS美化radio和checkbox

    Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...

  2. 利用纯CSS美化checkbox和radio和滑动按钮的实现

    W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...

  3. 纯CSS+HTML实现checkbox的思路与实例

    checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样.出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了. ...

  4. CSS效果篇--纯CSS+HTML实现checkbox的思路与实例

    checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样.出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了. ...

  5. 自定义常用input表单元素一：纯css 实现自定义checkbox复选框

    最下面那个是之前写的  今天在做项目的时候发现,之前写的貌似还是有点多,起码增加的span标签可以去掉,这样保持和原生相同的结构最好的,仅仅是样式上的变化.今天把项目中的这个给更新上来.下面就直接还是 ...

  6. 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val

    具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...

  7. 原创：纯CSS美化单复选框（checkbox、radio）

    最重要的一点,隐藏选择框本身.不多说了,上代码: <!doctype html> <html> <head> <meta charset="utf- ...

  8. 纯css美化复选框，单选框，滑动条（range）

    <div class="box"> <!-- 借鉴地址:http://www.cnblogs.com/xiaoxianweb/p/5465607.html --& ...

  9. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. tar解压错误

    # tar -zxvf aaa.tar.gz    tar: This does not look like a tar archive   tar: Skipping to next header ...

  2. android 控件的移动

    android 控件的移动 1. Java代码 imagebutton.setOnTouchListener(newOnTouchListener(){ int[]postion=newint[]{0 ...

  3. SQL学习笔记——SQL初入门，Ubuntu下MySQL的安装

          刚开始接触sql,于是准备在Ubuntu下学习sql,就跟着itercast的sql教程开始入门了. 下面只是我个人的记录,高手请绕道: 一. 在安装之前,我们可以用下面这个命令通过开放端 ...

  4. java设计模式--行为型模式--中介者模式

    怎么理解中介者模式,我姑且用房产中介来理解吧.呵呵 中介者模式: 中介者模式 概述 用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之 ...

  5. Unity 调用android插件

    1. Unity的Bundle Identifier必须和你的android报名一致 Activity和View的区别: Activity应该是一个展示页面,View是页面上一些按钮视图等等. 如何调 ...

  6. IOS 使用dispatch_once 创建单例

    + (instantClass *)sharedClient { static instantClass *_sharedClient = nil; static dispatch_once_t on ...

  7. 使用JUnit单元测试入门

    一.JUnit是什么? JUnit是一个开发源代码的java测试框架,用于编写和运行可重复的测试.它是用于单元测试框架体系xUnit的一个实例(用于java语言).JUnit最初是由Erich Gam ...

  8. 淘宝弹性布局方案lib-flexible研究

    1. lib-flexible不能与响应式布局兼容 先说说响应式布局的一些基本认识: 响应式布局的表现是:网页通过css媒介查询判断可视区域的宽度,在不同的范围应用不同的样式,以便在不同尺寸的设备上呈 ...

  9. MySQL中explain的type类型

    |  ALL              |  全表扫描 |  index            |  索引全扫描 |  range            |  索引范围扫描,常用语<,<= ...

  10. ionic安装

    npm set registry http://registry.cnpmjs.org/ 设置淘宝镜像