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. if 判断语句

    if 条件:if语句块当条件成立的时候会执行if语句块, 如果条件不成立. 不执行语句块的内容 例: money = int(input("请输入你兜里的钱:")) # 300 i ...

  2. 安全测试6_Web安全工具第二节(代理抓包分析工具)

    上节课讲了浏览器及扩展,这节课继续来学习下抓包分析. 首先看下下图,了解下代理工具的原理:代理就相当于收费站一样,任何要通过的车辆必须经过它. 浏览器的代理我们可以通过设置进行手动设置代理,或者通过P ...

  3. 微信小程序 setData 的坑(转)

    最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text ...

  4. IDEA搭建Spring框架环境

      一.spring 框架概念 spring 是众多开源 java 项目中的一员,基于分层的 javaEE 应用一站式轻量 级开源框架,主要核心是 Ioc(控制反转/依赖注入) 与 Aop(面向切面) ...

  5. [UGUI]图文混排(一):标签制定和解析

    参考链接: https://github.com/SylarLi/RichText/tree/master/Assets/Scripts 正则表达式: https://blog.csdn.net/ly ...

  6. ssh rsa 非对称加密 基本原理

    我们常用的ssh 免密登陆是用了 非对称加密的rsa算法(最为常用),与对称加密的相比会慢一些,但是更安全.秘钥长度超过768位无法破解. 默认长度是2048位(无法破解,非常安全) ssh-keyg ...

  7. bash-4.2$ bash: /home/test/.bashrc: 权限不够

    解决办法:https://blog.csdn.net/qq_38417808/article/details/81705559

  8. 在ls命令中使用通配符

    通配符比较简单.我们已经知道通配符常常是在shell终端中用来匹配文件名的,今天来看一下在ls命令中使用通配符的例子. 用法:ls [选项]... [文件]... ls本身也有很多的选项,我们今天不看 ...

  9. 爬虫--Scrapy-持久化存储操作

    总体概况 持久化存储操作: a. 磁盘文件 a) 基于终端指令 i. 保证parse方法返回一个可迭代类型的对象(存储解析到的页面内容) ii. 使用终端指令完成数据存储到制定磁盘文件中的操作 1. ...

  10. git-搭建企业git服务器

    1.安装 yum install git 2.增加用户 useradd git -d /home/git -g git 3.查看公钥鉴权文件是否存在  cat /home/git/.ssh/autho ...