1. input[type=radio],input[type=checkbox]  {
  2. display: inline-block;
  3. vertical-align: middle;
  4. width: 20px;
  5. height: 20px;
  6. margin-left: 5px;
  7. -webkit-appearance: none;
  8. background-color: transparent;
  9. border: 0;
  10. outline: 0 !important;
  11. line-height: 20px;
  12. color: #d8d8d8;
  13. }
  14. input[type=radio]:after  {
  15. content: "";
  16. display:block;
  17. width: 20px;
  18. height: 20px;
  19. border-radius: 50%;
  20. text-align: center;
  21. line-height: 14px;
  22. font-size: 16px;
  23. color: #fff;
  24. border: 2px solid #ddd;
  25. background-color: #fff;
  26. box-sizing:border-box;
  27. }
  28. input[type=checkbox]:after  {
  29. content: "";
  30. display:block;
  31. width: 20px;
  32. height: 20px;
  33. text-align: center;
  34. line-height: 14px;
  35. font-size: 16px;
  36. color: #fff;
  37. border: 2px solid #ddd;
  38. background-color: #fff;
  39. box-sizing:border-box;
  40. }
  41. input[type=checkbox]:checked:after  {
  42. border: 4px solid #ddd;
  43. background-color: #37AF6E;
  44. }
  45. input[type=radio]:checked:after  {
  46. content: "L";
  47. transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
  48. -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);
  49. border-color: #37AF6E;
  50. background-color: #37AF6E;
  51. }

使用css修改radio、checkbox样式的更多相关文章

  1. 【CSS】自定义checkbox样式

    修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...

  2. css修改placeholder的样式

    css修改placeholder的样式 input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: ...

  3. 自定义radio/checkbox样式

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

  4. css 模拟radio的样式

    1.input 默认的 type 为 radio的样式,在具体场合中的改造 默认的样式这样: 但是我要这样的: 这样看来是不是比原来的好看多了. 2.优化radio的样式 <span class ...

  5. sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标

    上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...

  6. CSS 美化radio checkbox

    CSS 样式 <style type="text/css"> .option-input { -webkit-appearance: none; -moz-appear ...

  7. 小程序 之修改radio默认样式

    一.效果图 二.代码 /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked { bor ...

  8. css修改滚动条默认样式

    之前因为公司项目需要,在网上找到的: 直接上代码了 html代码 <div class="inner"> <div class="innerbox&qu ...

  9. css修改select默认样式

    先来看看效果图: css: <style media="screen"> .select_demo, .select_list { width: 400px; heig ...

随机推荐

  1. Problem N

    Problem Description The cows have purchased a yogurt factory that makes world-famous Yucky Yogurt. O ...

  2. linq 在查询表达式中处理 null 值

    此示例显示如何在源集合中处理可能的 null 值. IEnumerable<T> 等对象集合可包含值为 null 的元素. 如果源集合为 null 或包含值为 null 的元素,并且查询不 ...

  3. js中编码问题escape、encodeURI

    未分类 1.js对文字进行编码涉及3个函数:   escape,encodeURI,encodeURIComponent, 相应3个解码函数:unescape,decodeURI,decodeURIC ...

  4. RE : 球体波浪倒计时

    背景: 移动端需要做一个倒计时球体水波的效果.主要用到了CSS的SVG瞄点动画和JS的计时器.该动画原型来自于  使用球体水面波动显示进度动画 http://wow.techbrood.com/fid ...

  5. 使用springboot完成密码的加密解密

    现今对于大多数公司来说,信息安全工作尤为重要,就像京东,阿里巴巴这样的大公司来说,信息安全是最为重要的一个话题,举个简单的例子: 就像这样的密码公开化,很容易造成一定的信息的泄露.所以今天我们要讲的就 ...

  6. 文本域、bootstrap-table显示以及MySQL三者间的换行符问题

    首先,今天在做项目的时候遇到的一个问题,如何实现文本输入换行以及在前台Bootstrap-table中显示也能够换行. 也许你马上就会想到说,用富文本编辑器,然而我们需要实现的只是文本输入以及换行功能 ...

  7. C#编写的艺术字类方法

    代码如下: using System;using System.Collections.Generic;using System.ComponentModel;using System.Drawing ...

  8. man ctags

    ctags命令帮助   命令格式     ctags [options] [file(s)] 或     etags [options] [file(s)]   源文件参数     不同语言中对象的种 ...

  9. Git文件状态描述

    检查当前文件状态 [root@typhoeus79 ice_test_m git_test]# git status # On branch master nothing to commit (wor ...

  10. MATLAB 大数据剔除坏值

    在用MATLAB进行数据分析的时候,坏点对正确结果的影响比较大, 因此,我么需要剔除野点,对于坏值的剔除,我们 利用  3σ准则 剔除无效数据: 3σ准则又称为拉依达准则,它是先假设一组检测数据只含有 ...