CSS 样式

 <style type="text/css">
.option-input {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
width: 16px;
height: 16px;
background: #cbd1d8;
border: none;
color: #fff;
cursor: pointer;
display: inline-block;
outline: none;
} .option-input:hover {
background: #9faab7;
} .option-input:checked {
background: #40e0d0;
} .option-input:checked::before {
width: 16px;
height: 16px;
position: absolute;
content: '\2714'; /*对号*/
display: inline-block;
text-align: center;
} .option-input:checked::after {
background: #40e0d0;
display: block;
position: relative; } .option-input.radio {
border-radius: 50%;
} .option-input.radio::after {
border-radius: 50%;
} table td {
border:1px solid black;
}
</style>

  body:[ content:属性修改现实的内容:http://blog.csdn.net/u013261261/article/details/44562907]

 <table>
<tr>
<td>
<input type="checkbox" class="option-input checkbox" style="top:4px;position:relative;" checked="checked" />
121221
</td>
</tr>
<tr>
<td> <input type="radio" class="option-input radio"/>1212</td>
</tr>
</table>

  

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

  1. 用纯CSS美化radio和checkbox

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

  2. 纯CSS美化的checkbox 和 radio

    html <!DOCTYPE HTML> <html> <head> <title>纯CSS3实现自定义美化复选框和单选框</title> ...

  3. 学习笔记 第十章 使用CSS美化表单

    第10章   使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1  表单的基本结构 表单包含多个标签,由很多控件组成 ...

  4. 学习笔记 第八章 使用CSS美化列表

    第8章  使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...

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

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

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

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

  7. :radio :checkbox

    匹配所有单选按钮   示例 描述: 查找所有单选按钮 HTML 代码: <form> <input type="text" /> <input typ ...

  8. 只用CSS美化选择框

    只用CSS美化选择框 2012-03-02 11:04 by iBlog, 26240 阅读, 14 评论, 收藏, 编辑 <本文译自Style a Select Box Using Only ...

  9. jSP的3种方式实现radio ,checkBox,select的默认选择值。

    jSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%Stri ...

随机推荐

  1. WPF Stake

    WPF中的StackPanel.WrapPanel.DockPanel 转:http://blog.sina.com.cn/s/blog_6c81891701017a34.html StackPane ...

  2. django连接mysql数据库以及建表操作

    django连接mysql数据库需要在project同名的目录下面的__init__.py里面加入下面的东西 import pymysql pymysql.install_as_MySQLdb() 找 ...

  3. 安装hyperledger fabric V1.0.0-beta

      安装文档位置: https://github.com/hyperledger/fabric   fabric代码托管地址 https://hyperledger-fabric.readthedoc ...

  4. 测试HANA的真实案例

    configure memory limit for DEV.QAS 目前总内存为1367.19GB, DEV和QAS为同一数据库 我们将设置DEV为600GB QAS也为600GB ======== ...

  5. 45.更新一下scrapy爬取工商信息爬虫代码

    这里是完整的工商信息采集代码,不过此程序需要配合代理ip软件使用.问题:1.网站对ip之前没做限制,但是采集了一段时间就被检测到设置了反爬,每个ip只能访问十多次左右就被限制访问.2.网站对请求头的检 ...

  6. hdfs fsimage namenode 应该设置多少堆内存合适

    线上的fsimage 有1.8G左右了,设置了6G heap 不够用了 新生代:老年代=1:2=2G: 4G NameNode的内存主要由NameSpace和BlocksMap占用,其中NameSpa ...

  7. Flex 画图

    <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="h ...

  8. js window.open隐藏参数提交

    1.采用form方式提交 var url = "page/public/exportExcel.jsp"; //create a form var tempForm = docum ...

  9. Appium环境安装

    Appium 是开源的.跨平台的.多语言支持的 移动应用 自动化工具 原生app,如计算器 混合(Hybrid)app 内嵌web + 原生 移动 web app 手机浏览器打开的网址 安装appiu ...

  10. 机器学习进阶-阈值与平滑-图像平滑操作(去噪操作) 1. cv2.blur(均值滤波) 2.cv2.boxfilter(方框滤波) 3. cv2.Guassiannblur(进行高斯滤波) 4. cv2.medianBlur(进行中值滤波)

    1.cv2.blur(img, (3, 3))  进行均值滤波 参数说明:img表示输入的图片, (3, 3) 表示进行均值滤波的方框大小 2. cv2.boxfilter(img, -1, (3, ...