css复选框表单,用CSS来美化表单—

原标题：用CSS来美化表单——复选按钮篇

今天，我们来学习如何利用CSS美化checkbox复选框按钮，过程非常简单，本文主要是提供美化复选框按钮的方法，至于美化到何种程度还需大家自己去举一反三，发挥各自的想象做出各种各样的效果来。下面是美化前和美化后的效果对比图。

html代码如下：

CSS样式如下：

.regular-checkbox {

display: none;

}

.regular-checkbox + label {

position: relative;

border: 1px solid #cacece;

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);

padding:8px 12px;

text-align:center;

overflow:hidden;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

display: inline-block;

}

.regular-checkbox + label:active, .regular-checkbox:checked + label:active {

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);

}

.regular-checkbox:checked + label {

color:#333;

border: 1px solid #adb8c0;

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);

background: url(images/checked.png) no-repeat right bottom;

background-size:20px 20px;

}

图片素材(可以自己动手另外制作勾选的效果图片)：

下一次我们将讲解如何利用CSS来美化表单中的文件域。

此文为王成华原创内容，特此声明，如有转载，请注明出处。返回搜狐，查看更多

责任编辑：

css复选框表单,用CSS来美化表单——复选按钮篇相关推荐

phpcmsV9 添加内容：如何“增加复选框、下拉菜单”（含案例、截图）- 教程篇
文章目录 phpcmsV9 添加内容:如何"增加多选框.下拉菜单"(含案例.截图)- 教程篇步骤: 效果截图:省略 phpcmsV9 添加内容:如何"增加多选框.下拉菜 ...
css复选框样式_使用CSS样式复选框
css复选框样式 Introduction: 介绍: Sometimes we want to develop a website or web page that would contain a f ...
Django获取多个复选框的值，并插入对应表底下
1.实现的功能类似于,多个复选框,后面还有一个备注,之后要把复选框的值和备注一一对应插入数据库表中,主要提供一个思路,代码不全. 2.首先,html页面先设计好,多个复选框还有一个个备注,代码如下: ...
jquery复选框组清空选中的值_jQuery选取所有复选框被选中的值并用Ajax异步提交数据...
昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...
vue复选框组件自定义对勾_vue2.0中ckeckbox(复选框)的使用心得，及对click事件和change的理解...
最近在公司项目中使用vue2.0做开发,在使用checkbox时遇到了一些问题,首先我们先了解一下需求. 如上如所示,在上方复选框被点击时,更改下方p标签的文本内容为:复选框已被选中.并将p标签文字颜 ...
html怎样创建复选框,如何使用可点击标签创建HTML复选框
方法1:包装标签将复选框包装在 label 标记内: Text 方法2:使用for属性使用 for 属性(匹配复选框 id ): Text NOTE :页面上的ID必须是唯一的! 解释由于其他答 ...
C#ListView控件添加Checkbox复选框并获取选中的数目,检查checkbox是否勾选
[转载]原地址:http://blog.csdn.net/lucky51222/article/details/41892429 具体方法 1.添加复选框并且如下设置 listView1.Check ...
javafx树视图加选框_JavaFX缺少的功能调查：表视图
javafx树视图加选框 JavaFX的TableView(和TreeTableView)赢得了我最近的" JavaFX缺失功能"调查以及许多后续讨论中(尤其是我们苏黎世JavaF ...
Word中将传统的复选框型窗体域选项插件批量替换成复选框内容控件
在Word 2007及更早的版本中,使用的是复选框型窗体域选项插件:在2010及更新的版本中,使用的是复选框内容控件. 可以通过下面的VBA, 批量将旧插件更换为新插件. Sub ScratchMa ...
layui table勾选框的修改_Layui默认选中table的CheckBox复选框方法_飛雲_前端开发者...
方法一:如何根据条件判断是否默认选中table表格前面的复选框 table.render({ elem: '#userTable' , url: '../sysRole/getUserList' , ...

css复选框表单,用CSS来美化表单——复选按钮篇

css复选框表单,用CSS来美化表单——复选按钮篇相关推荐

最新文章

热门文章