一,如何隐藏小程序中的很粗的滚动条,实现页面的美化?
 
tit: 在开发小程序的过程中,无论是横向或者纵向当产生滚动条时,系统默认的滚动条会很粗,效果展示十分难看,我们可以通过设置如下wxss代码实现滚动条的美化。
 
方法一:
::-webkit-scrollbar {
display:none;
}
 
方法二:
::-webkit-scrollbar {
width: ;
height: ;
color: transparent;
}
二,如何改变小程序单选/复选框的样式?
 
tit:  在开发时,很多情况下我们需要使用单选/复选框,但是我们发现单选复选框的样式并不是我们想要的样式,我们可以通过如下设置实现wxss自定义单选/复选样式的修改。
 
radio:
/* 未选中的背景样式*/
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的美化的更多相关文章

  1. 用纯CSS美化radio和checkbox

    Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...

  2. 纯CSS3美化radio和checkbox

    如题,主要通过CSS3来实现将radio和checkbox美化的效果.可是兼容性并非非常好,PC端仅仅支持chrome浏览器(IE和Firefox測试不行,其它没有很多其它測试).然后微信端和QQ端訪 ...

  3. 原生html、js手写 radio与checkbox 美化

    原生html.js手写 radio与checkbox   美化 html <!DOCTYPE html> <html> <head> <meta charse ...

  4. 修改radio、checkbox、select默认样式的方法

    样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...

  5. 实现对DataGird控件的绑定操作

    //实现对DataGird控件的绑定操作 function InitGrid(queryData) { $('#grid').datagrid({ //定位到Table标签,Table标签的ID是gr ...

  6. 前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

    前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...

  7. 基于DevExpress实现对PDF、Word、Excel文档的预览及操作处理

    http://www.cnblogs.com/wuhuacong/p/4175266.html 在一般的管理系统模块里面,越来越多的设计到一些常用文档的上传保存操作,其中如PDF.Word.Excel ...

  8. C#代码实现对HTTP POST参数进行排序

    private static string GetSortedParas(Dictionary<string, string> dic) { dic = dic.OrderBy(key = ...

  9. 在VS2015中用C++创建DLL并用C#调用且同时实现对DLL的调试

    from:http://m.blog.csdn.net/article/details?id=51075023 在VS2015中先创建C#项目,然后再创建要编写的动态库DLL项目,这样做的好处是整个解 ...

随机推荐

  1. linxu 安装rabbitMQ

    转载自:http://blog.csdn.net/mooreliu/article/details/44645807 首先使EPEL(http://fedoraproject.org/wiki/EPE ...

  2. 在线前端 样式和js

    bootstrap+ jquery <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstra ...

  3. MySQL-性能优化-优化设计和设计原则

    MySQL性能优化目的如何合理的设计数据库?什么样的数据库设计才能给后期DBA优化提供基石? 数据库设计与程序设计的差异? 数据库设计早期优化1. 关系明确(理清表之间的关系,可以通过冗余的方式提高效 ...

  4. Memcached CAS 命令

    Memcached CAS(Check-And-Set 或 Compare-And-Swap) 命令用于执行一个"检查并设置"的操作 它仅在当前客户端最后一次取值后,该key 对应 ...

  5. 第五章:异步Web服务

    到目前为止,我们已经看到了许多使Tornado成为一个Web应用强有力框架的功能.它的简单性.易用性和便捷性使其有足够的理由成为许多Web项目的不错的选择.然而,Tornado受到最多关注的功能是其异 ...

  6. SpringMvc中的校验框架@valid和@validation的概念及相关使用 和BindingResult bindingResult

    1.比较 @Valid是使用hibernate validation的时候使用 @Validated 是只用spring  Validator 校验机制使用\ 2.实现 其中,@valid,java的 ...

  7. activiti如何让业务对象和对应的流程关联

    如何让业务对象和对应的流程 关联? 发现ProcessInstance 有个方法getBusinessKey()可以得到一个businessKey. ProcessInstance 对应数据库中的表a ...

  8. 20.并发容器之ArrayBlockingQueue和LinkedBlockingQueue实现原理详解

    1. ArrayBlockingQueue简介 在多线程编程过程中,为了业务解耦和架构设计,经常会使用并发容器用于存储多线程间的共享数据,这样不仅可以保证线程安全,还可以简化各个线程操作.例如在“生产 ...

  9. tinyxml解析xml

    基于tinyxml做的简单的xml解析. 1.创建xml bool CreateXmlFile(string& szFileName) {//创建xml文件,szFilePath为文件保存的路 ...

  10. SOUI中启用拖文件

    本文所用SOUI版本为1.0版本,在拖文件上与一般的消息略有不同. 1.添加拖文件消息响应 先与常规添加消息相同. class CMainFrm : public SHostWnd { public: ...