css美化checkbox radio样式
/*check,radio*/
input.check_txt[type='checkbox']{
display: none;
} input.check_txt[type='checkbox'] + label{
display: block;
float: left;
-moz-appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #fff;
border:2px solid #cecece;
border-radius: 3px; cursor:pointer;
} input.check_txt[type='checkbox']:checked + label {
background: #f0f0f0 url(../images/check.png) no-repeat center center;
background-size:80%; }
html:
<p class="xd-clause-wrap">
<input type="checkbox" name="" id="clause" value="">
<label for="clause"></label> 我已阅读并同意<a href="javascript:;">《借款服务条款》</a>
</p>
css美化checkbox radio样式的更多相关文章
- css美化checkbox的样式
使用iCheck插件可以改变checkbox.radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的c ...
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- 用CSS美化checkbox复选按钮和raido单选按钮-适用于移动端
最终效果: 实现方法 index.html: <!DOCTYPE html> <html> <head> <title></title> & ...
- 利用纯CSS美化checkbox和radio和滑动按钮的实现
W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...
- css修改原生radio样式
日常工作中经常会用到单选框radio,而原生样式不好看无法满足项目要求,模拟写一个又比较麻烦,所以写了一个改变原生样式的demo. 原生样式: 改变后的样式: 以下为demo代码: <!DOCT ...
- CSS之checkbox&radio&textarea&select
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- checkbox/radio 样式修改
只改颜色 input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: ...
- css 绘制checkbox,radio
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 自定义checkbox,radio样式
input[type=radio] { margin-right: 5px; cursor: pointer; font-size: 14px; width: 15px; height: 15px; ...
随机推荐
- $.ajax用法与举例
下面是一段比较常用到的 $.ajax 方法: $.ajax({ type:'GET', url:'http://www.phpernote.com/jquery.php', data:{usernam ...
- unity3d插件Daikon Forge GUI 中文教程7-高级控件slider的使用
3.6.slider滑块 我们说说前面这个图片.对象 Appearance: Atlas 图集: Track 滑块的轨道图片 Back color滑块的轨道图片的主颜色. O ...
- 2016HUAS暑假集训训练题 E - Rails
There is a famous railway station in PopPush City. Country there is incredibly hilly. The station wa ...
- php课程---语句及函数
语句: 一:分支语句 1.if(条件1){满足条件1执行} 2.if(条件1){满足条件1执行}else{不满足条件1执行} 3.if(条件1){满足条件1执行}els ...
- 杭电ACM 1197
#include<stdio.h>main(){ int temp,i,t,sum10,sum12,sum16; for(i=1000;i<=9999;i++) { temp=i; ...
- C# 结构转化
一.string 转 char[] string ss = "alsofly"; char[] cc = ss.ToCharArray(); 二.char[] 转 string c ...
- 使用 JavaScript 实现栈
1.栈的基本操作 function Stack() { //使用数组保存栈元素 var items = []; //添加新元素到栈顶(相当于数组的末尾) this.push = function(el ...
- jquery实现nav的下拉
<script type="text/javascript"> $(function(){ //tab_flag 根据此标记判断是否由父级nav指向了nav_list ...
- 【C++】int、const char*、char*、char、string之间的转换
#include "stdafx.h" #include<string> #include<vector> #include<iostream> ...
- java取整和java四舍五入方法 BigDecimal.setScale()方法详解
import java.math.BigDecimal; public class TestGetInt { public static void main(String[] args) { doub ...