css3实现对radio和checkbox的美化
::-webkit-scrollbar {
display:none;
}
::-webkit-scrollbar {
width: ;
height: ;
color: transparent;
}
/* 未选中的背景样式*/
radio .wx-radio-input {
width: 40rpx;
height: 40rpx;
border-radius: %;
}
/* 选中后的背景样式*/
radio .wx-radio-input.wx-radio-input-checked {
background-color: #16cc80;
}
radio .wx-radio-input.wx-radio-input-checked::before {
width: 40rpx;
height: 40rpx;
border-radius: %;
text-align: center;
line-height: 40rpx;
font-size: 30rpx;
color: #fff;
background-color: transparent;
transform: translate(-%,-%) scale();
-webkit-transform: translate(-%,-%) scale();
}
checkbox:
/* 未选中的背景样式*/
checkbox .wx-checkbox-input {
width: 40rpx;
height: 40rpx;
border-radius: %;
}
/* 选中后的背景样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background-color: #16cc80;
}
/*选中状态对勾的样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 40rpx;
height: 40rpx;
border-radius: %;
text-align: center;
line-height: 40rpx;
font-size: 30rpx;
color: #fff;
background-color: transparent;
transform: translate(-%,-%) scale();
-webkit-transform: translate(-%,-%) scale();
}
css3实现对radio和checkbox的美化的更多相关文章
- 用纯CSS美化radio和checkbox
Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...
- 纯CSS3美化radio和checkbox
如题,主要通过CSS3来实现将radio和checkbox美化的效果.可是兼容性并非非常好,PC端仅仅支持chrome浏览器(IE和Firefox測试不行,其它没有很多其它測试).然后微信端和QQ端訪 ...
- 原生html、js手写 radio与checkbox 美化
原生html.js手写 radio与checkbox 美化 html <!DOCTYPE html> <html> <head> <meta charse ...
- 修改radio、checkbox、select默认样式的方法
样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...
- 实现对DataGird控件的绑定操作
//实现对DataGird控件的绑定操作 function InitGrid(queryData) { $('#grid').datagrid({ //定位到Table标签,Table标签的ID是gr ...
- 前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...
- 基于DevExpress实现对PDF、Word、Excel文档的预览及操作处理
http://www.cnblogs.com/wuhuacong/p/4175266.html 在一般的管理系统模块里面,越来越多的设计到一些常用文档的上传保存操作,其中如PDF.Word.Excel ...
- C#代码实现对HTTP POST参数进行排序
private static string GetSortedParas(Dictionary<string, string> dic) { dic = dic.OrderBy(key = ...
- 在VS2015中用C++创建DLL并用C#调用且同时实现对DLL的调试
from:http://m.blog.csdn.net/article/details?id=51075023 在VS2015中先创建C#项目,然后再创建要编写的动态库DLL项目,这样做的好处是整个解 ...
随机推荐
- Elasticsearch之几个重要的分词器
前提 什么是倒排索引? Elasticsearch之分词器的作用 Elasticsearch之分词器的工作流程 Elasticsearch之停用词 Elasticsearch之中文分词器 Elasti ...
- 关于xftp连接不了Linux,但是却可以用xshell连接Linux
解决方法:用sftp协议,不要用ftp协议
- 解题报告:hdu1284 钱币兑换问题
2017-09-03 19:03:06 writer:pprp 状态定义: dp[i][j] = x 代表的是 用前i 中硬币构造 j 美分的方法数目: 初始化: dp[0][0] = 1 状态转移: ...
- 2017ACM/ICPC广西邀请赛-重现赛1005 CS course
2017-08-31 16:19:30 writer:pprp 这道题快要卡死我了,队友已经告诉我思路了,但是做题速度很缓慢,很费力,想必是因为之前 的训练都是面向题解编程的缘故吧,以后不能这样了,另 ...
- [解决]JS失效,提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
上网找了找,木有找到相关的解决办法,索性自己试了试. 原页面是这样写的: <html> <head> <meta http-equiv="Content-Typ ...
- quartz动态job工具类 serviceh注入问题
package com.heyi.yanglao.common.job.util; import cn.hutool.core.date.DateUtil; import lombok.extern. ...
- angular2 自定义双向绑定属性
import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core'; @Component({ selecto ...
- APP Inventor 基于网络微服务器的即时通信APP
APP Inventor 基于网络微服务器的即时通信APP 一.总结 一句话总结:(超低配版的QQ,逃~) 1.APP Inventor是什么? google 傻瓜式 编程 手机 app App In ...
- Kotlin------类和对象(二)
get/set方法 声明一个属性的完整语法是 var <propertyName>[: <PropertyType>] [= <property_initializer& ...
- Mysql5.7基于日志主从复制
主从同步概念 主从同步是异步复制 Mysql两种复制类型: 基于二进制日志 使用GTID完成基于事务的复制 基于日志三种方式: Mysql5.7需要注意的问题: 老版本方法创建mysql用户 #mys ...