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 ...
随机推荐
- 【Linux】使用ZStack私有云创建本地Linux服务器
1.运维配置了一台Linux的主机,然后安装了ZStack,前面这部分操作运维处理了. 2.首先打开Zstack的网址地址,一般是一个IP地址(此时不写) 3.然后进入页面后,默认进入首页,此时可以按 ...
- GNU coreutils
内核实用程序,针对文本及文件操作.涉及到102条linux命令.命令列表:cp.install.ln.mv.ls.echo…… 常见选项 1.退出状态 2.备份选项 cp, install, ln, ...
- apache(httpd)配置
1.简单配置 1 监听地址 2 主页目录 3 别名 4 目录访问的身份验证 5 https 6 MPM(under linux) * 配置文件中路径.文件名均不支持中文. <<<&l ...
- ORA-00257: archiver error. Connect internal only, until freed【日志归档清理】
select * from V$FLASH_RECOVERY_AREA_USAGE; 查看使用情况 用plsql登陆时提示“ORA-00257: archiver error. Connect in ...
- python获取指定日期的前N天日期和后N天日期
#encoding:utf-8from datetime import date, datetime, timedelta day = date.today()now = datetime.now() ...
- Eclispe让SVN插件显示英文
eclipse\configuration\config.ini 文件添加以下内容: # Set Subversion English Version osgi.nl=en_US
- githup创建新java项目
1.在githup中创建仓库 2.import创建的地址到本地文件d:/mygit 3.在d:/mygit中创建eclipse项目 3.在eclipse中team-->push to branc ...
- 如何在notepad++实现代码自动化排版(调用Astyle)
我先介绍这个怎么在notepad++中调用原版的astyle的方法. 在notepad++:运行或是F5, 在输入框中选择astyle.exe所在的目录,什么你没有astyle,下载地址https:/ ...
- STM32F105开发板
- jeecg好用吗,看看大家的评价
大家都会有个疑问,jeecg好用吗? 看看大家的评价