CSS 美化radio checkbox
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的更多相关文章
- 用纯CSS美化radio和checkbox
Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...
- 纯CSS美化的checkbox 和 radio
html <!DOCTYPE HTML> <html> <head> <title>纯CSS3实现自定义美化复选框和单选框</title> ...
- 学习笔记 第十章 使用CSS美化表单
第10章 使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1 表单的基本结构 表单包含多个标签,由很多控件组成 ...
- 学习笔记 第八章 使用CSS美化列表
第8章 使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...
- CSS效果篇--纯CSS+HTML实现checkbox的思路与实例
checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样.出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了. ...
- 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val
具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...
- :radio :checkbox
匹配所有单选按钮 示例 描述: 查找所有单选按钮 HTML 代码: <form> <input type="text" /> <input typ ...
- 只用CSS美化选择框
只用CSS美化选择框 2012-03-02 11:04 by iBlog, 26240 阅读, 14 评论, 收藏, 编辑 <本文译自Style a Select Box Using Only ...
- jSP的3种方式实现radio ,checkBox,select的默认选择值。
jSP的3种方式实现radio ,checkBox,select的默认选择值.以radiao 为例:第一种方式:在jsp中使用java 脚本,这个方法最直接,不过脚本太多,不容易维护<%Stri ...
随机推荐
- WPF Stake
WPF中的StackPanel.WrapPanel.DockPanel 转:http://blog.sina.com.cn/s/blog_6c81891701017a34.html StackPane ...
- django连接mysql数据库以及建表操作
django连接mysql数据库需要在project同名的目录下面的__init__.py里面加入下面的东西 import pymysql pymysql.install_as_MySQLdb() 找 ...
- 安装hyperledger fabric V1.0.0-beta
安装文档位置: https://github.com/hyperledger/fabric fabric代码托管地址 https://hyperledger-fabric.readthedoc ...
- 测试HANA的真实案例
configure memory limit for DEV.QAS 目前总内存为1367.19GB, DEV和QAS为同一数据库 我们将设置DEV为600GB QAS也为600GB ======== ...
- 45.更新一下scrapy爬取工商信息爬虫代码
这里是完整的工商信息采集代码,不过此程序需要配合代理ip软件使用.问题:1.网站对ip之前没做限制,但是采集了一段时间就被检测到设置了反爬,每个ip只能访问十多次左右就被限制访问.2.网站对请求头的检 ...
- hdfs fsimage namenode 应该设置多少堆内存合适
线上的fsimage 有1.8G左右了,设置了6G heap 不够用了 新生代:老年代=1:2=2G: 4G NameNode的内存主要由NameSpace和BlocksMap占用,其中NameSpa ...
- Flex 画图
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="h ...
- js window.open隐藏参数提交
1.采用form方式提交 var url = "page/public/exportExcel.jsp"; //create a form var tempForm = docum ...
- Appium环境安装
Appium 是开源的.跨平台的.多语言支持的 移动应用 自动化工具 原生app,如计算器 混合(Hybrid)app 内嵌web + 原生 移动 web app 手机浏览器打开的网址 安装appiu ...
- 机器学习进阶-阈值与平滑-图像平滑操作(去噪操作) 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, ...