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. JavaNIO阻塞IO添加服务器反馈

    package com.java.NIO; import java.io.IOException; import java.net.InetSocketAddress; import java.nio ...

  2. scroll 区域滚动

    网页内都有快速滚动和回弹的效果: overflow: scroll; -webkit-overflow-scrolling: touch;   实际上,Safari用了原生控件来实现,对于有-webk ...

  3. VS2015 使用Xunit来进行单元测试

    安装Xunit: Xunit的安装现在不需要插件支持了,直接使用NuGet安装如下两个库即可: PM> Install-Package xunit PM> Install-Package ...

  4. NOIP2017衢二中旅游记Day 1

    NOIP前一天下午早早的去了衢州: 车程大概在4个半小时左右: 车上大家都一脸颓废,并混杂着动听的音乐: 到了衢州二中,立刻跑去吃晚饭: 吃饭的队伍特别长,吃面的却空无一人: 我毅然决然地选择了去吃面 ...

  5. Mac_Homebrew

    Homebrew作为OS X上强大的包管理器,为系统软件提供了非常方便的安装方式,独特式的解决了包的依赖问题,并不再需要烦人的sudo,一键式编译,无参数困扰,真的,你值得拥有. brew 的安装:  ...

  6. Python之子进程subprocess模块

    http://www.cnblogs.com/vamei/archive/2012/09/23/2698014.html http://blog.csdn.net/jgood/article/deta ...

  7. [转]Oracle执行计划详解

    Oracle执行计划详解 --- 作者:TTT BLOG 本文地址:http://blog.chinaunix.net/u3/107265/showart_2192657.html --- 简介:   ...

  8. PHP设计模式之工厂模式

    工厂模式(Factory pattern)和单例模式一样,是另外一种创建型模式. 和单例模式不同的是,单例模式会创建和管理一个单独的类型的单一对象,工厂模式则是用于创建多种不同类型的类的多个对象. 工 ...

  9. django 前端请求跨域问题解决

    django 前端请求跨域问题解决 笔者之前在做django-restful-api开发的时候,在前端请求页面发送请求的时候直接出现301,域名重定向的问题,经过一番查阅资料,终于得到了非常完美的解决 ...

  10. 方法的形参、ref参数、out参数的区别

    我们在定义方法时,经常会涉及到传参.因为引用类型的数据在用变量存储时,是存储的地址,所以在传参时,依然是传递的地址,但是值类型的数据在传参时就会有所不同.值类型数据在调用方法传参时,普通情况下是值传递 ...