微信小程序 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 默 ...
随机推荐
- Win7+Ubuntu11.10(EasyBCD硬盘安装)----转载
Win7+Ubuntu11.10(EasyBCD硬盘安装) ubuntu 下载地址:http://mirrors.163.com/ubuntu-releases/12.04/ 1)首先还是分区,在计算 ...
- 笔记:Python实现二分查找
def search(sequence, number, lower=0, upper=None): if upper is None: upper = len(sequence) - 1 if lo ...
- 在 Mac 上使用 `sed` 命令的几个坑
不可忽略的备份格式 sed -i 's/hello/world/g' hello.text 上面这行代码,可以在 linux 上运行,作用是将找到的 hello 替换为 world,并且直接保存修改到 ...
- Web安全之XSS 入门与介绍
XSS的入门与介绍 跨站攻击 XSS全称跨站脚本(Cross Site Scripting),一种注入式攻击方式. XSS成因 对于用户输入没有严格控制而直接输出到页面 对非预期输入的信任 XSS的危 ...
- mysql 主从笔记
主库配置 一.修改主库配置文件 开启binlog,并设置server-id,每次修改配置文件后都要重启mysql服务才会生效 server-id = log-bin = mysql-bin binlo ...
- 关于 argc 和 argv
https://stackoverflow.com/questions/3898021/regarding-mainint-argc-char-argv 当使用命令行启动程序,或者给程序传输参数时,可 ...
- mysql 的特殊函数
1. FORMAT() 函数 函数用于对字段的显示进行格式化 语法: SELECT FORMAT(column_name,format) FROM table_name column_name 必需 ...
- 安装和设置kubectl命令
Linux [root@cx-- ~]# curl -LO https://storage.googleapis.com/kubernetes-release/release/v1.13.5/bin/ ...
- 基于标记的分水岭分割算法/OpenCV中距离变换
Opencv分水岭算法——watershed自动图像分割用法 OpenCV距离变换distanceTransform应用 图像分割作为图像识别的基础,在图像处理中占有重要地位,通常需要在进行图像分割算 ...
- clover无缘无故隐藏书签栏原因
可能是不小心按住了Ctrl+shift+B