微信小程序 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 默 ...
随机推荐
- 《DSP using MATLAB》Problem 8.43
代码: %% ------------------------------------------------------------------------ %% Output Info about ...
- mybatis 处理CLOB/BLOB类型数据
BLOB和CLOB都是大字段类型. BLOB是按二进制来存储的,而CLOB是可以直接存储文字的. 通常像图片.文件.音乐等信息就用BLOB字段来存储,先将文件转为二进制再存储进去.文章或者是较长的文字 ...
- 24-Ubuntu-文件和目录命令-查找文件内容-grep
grep Linux系统中grep命令是一种强大的文本搜索工具. grep允许文本文件进行模式查找,所谓模式查找,又被称为正则表达式. 选项 含义 -n 显示匹配行及行号 -v 显示不包括匹配文本的所 ...
- 【POJ】3278 Catch That Cow
题目链接:http://poj.org/problem?id=3278 题意:有一头奶牛跑到了K的位置,农夫在N的位置,求最短抓到奶牛的时间. 农夫有两种移动方式. 1.步行:一分钟内从x->x ...
- RDD运行原理
- JS按比例缩放图片
1.JS代码 <script type="text/javascript" language="javascript"> var flag = fa ...
- Elasticsearch.net一些开发笔记
.net下开发es半年多了,留下些笔记 //https://www.elastic.co/guide/cn/elasticsearch/guide/current/combining-filters. ...
- jmeter遇到的问题:java.net.ConnectException: Connection refused: connect
1.使用jmeter执行脚本,在察看结果树的的响应数据中看到的错误提示如下: java.net.ConnectException: Connection refused: connect at jav ...
- thinkphp 判断请求类型
判断请求类型 在很多情况下面,我们需要判断当前操作的请求类型是GET .POST .PUT或 DELETE,一方面可以针对请求类型作出不同的逻辑处理,另外一方面有些情况下面需要验证安全性,过滤不安全的 ...
- CF377D Developing Game
题目链接: luogu 题目分析: 把每个人当成一个三元组\([l_i, r_i, v_i]\) 考虑每个人对哪个能力区间\([L, R]\)有贡献 应该是左端点在\([l_i, v_i]\),右端点 ...