微信小程序 button 按钮所有默认的样式
小程序默认样式
// 默认样式
button {
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
padding-left:14px;
padding-right:14px;
box-sizing:border-box;
font-size:18px;
text-align:center;
text-decoration:none;
line-height:1;
border-radius:5px;
-webkit-tap-highlight-color:transparent;
overflow:hidden;
color:#000000;
background-color:#fff;}
// 边框样式
button::after{border: 0;}
// 禁用时样式
button[disabled] {background-color: #fff;color: #666; }
// 点击时样式
.button-hover {color:rgba(0, 0, 0, 0.6);background-color:#fff;}
重置样式
button{
margin:0;
padding:0;
background-color:rgba(0,0,0,0);
line-height:inherit;
border-radius:0;
border:none;
display:flex;
justify-content:center;
align-items:center;
}
button::after{
border: none;
}
.button-hover {
background-color:rgba(0, 0, 0, 0);
}
微信小程序 button 按钮所有默认的样式的更多相关文章
- 微信小程序——button, swiper等默认样式更改
微信开发工具里面,无法展示编译后的一些样式,如::before,::after这些伪类.有时候我们需要修改一些组件的默认样式会略感到麻烦,因为不知道是通过哪里控制的. 我就平常遇到的一些修改默认样式, ...
- 微信小程序 —— button按钮去除border边框
button默认有边框,边框用“border : none”去掉就不可以,边框依然存在, 使用 button::after{ border: none; } 来去除边框,边框就没了 wxml: < ...
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- 微信小程序开发:学习笔记[4]——样式布局
微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...
- 微信小程序button授权页面,用户拒绝后仍可再次授权
微信小程序授权页面,进入小程序如果没授权跳转到授权页面,授权后跳转到首页,如果用户点拒绝下次进入小程序还是能跳转到授权页面,授权页面如下 app.js 中的 onLaunch或onShow中加如下代 ...
- 微信小程序——悬浮按钮
关键: position: fixed; wxml: <navigator url="/pages/issue/index"><image class='i ...
- 小北微信小程序之小白教程系列之 -- 样式(WXSS)
为了适应广大的前端开发者,WXSS 具有 CSS 大部分 特性.同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改.与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入. ...
- 微信小程序——动态修改页面数据(和样式)及参数传递
1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...
- 微信小程序 button 组件
button 组件 拥有强大的功能 自身可以拥有很多跟微信风格的样式,且是 表单 和 开放的能力 重要的 按钮 button 的属性: size: 类型 字符串 按钮的大小 属性值:default 默 ...
随机推荐
- python中oop
转自 http://www.cnblogs.com/BeginMan/p/3510786.html 本文旨在Python复习和总结: 1.如何创建类和实例? # 创建类 class ClassNam ...
- jdbc_mysql----interset
- iOS开发系列-HTTPS
HTTPS 网景在1994年创建了HTTPS,并应用在网景导航者浏览器中. 最初,HTTPS是与SSL一起使用的:在SSL逐渐演变到TLS. HTTPS协议与HTTP协议的一些不同: http是超文本 ...
- 单独编译和使用webrtc音频降噪模块(附完整源码+测试音频文件)
单独编译和使用webrtc音频增益模块(附完整源码+测试音频文件) 单独编译和使用webrtc音频回声消除模块(附完整源码+测试音频文件) webrtc的音频处理模块分为降噪ns,回音消除aec,回声 ...
- C++调用JS,JS调用C++
JS调用C++,通过设置DIID_HTMLDocumentEvents事件,来捕获HTMLWINDOW上的事件,再通过事件对象的get_srcElement得到事件源,从而得到指定元素对象,从而获取元 ...
- 20175323《Java程序设计》第五周学习总结
教材学习内容总结 第五章的知识框架总结 代码托管:https://gitee.com/ruirui_yummy/java-besti-20175323 代码提交过程截图 代码量截图 学习进度条 代码行 ...
- Hadoop 平台搭建
一.在Linux中安装JDK并配置环境变量 输入javac 查看是否已安装java环境如果没有安装 sudo apt-get install openjdk-7-jdk再次检测 javac修改配置参数 ...
- 详解JDBC与Hibernate区别
详解JDBC与Hibernate区别 引用地址:http://www.cnblogs.com/JemBai/archive/2011/04/13/2014940.html 刚开始学习JAVA时,认为H ...
- shell $* 和$@ 的区别以及运算操作
#! /bin/bash test() { echo "未加引号,二者相同" echo $* echo $@ # 脚本名 echo $ # 参数个数 echo $# # 返回值 e ...
- js基础应用-打字机,震动窗口
js基础应用一,窗口震动 html+js代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...