小程序默认样式

// 默认样式
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 按钮所有默认的样式的更多相关文章

  1. 微信小程序——button, swiper等默认样式更改

    微信开发工具里面,无法展示编译后的一些样式,如::before,::after这些伪类.有时候我们需要修改一些组件的默认样式会略感到麻烦,因为不知道是通过哪里控制的. 我就平常遇到的一些修改默认样式, ...

  2. 微信小程序 —— button按钮去除border边框

    button默认有边框,边框用“border : none”去掉就不可以,边框依然存在, 使用 button::after{ border: none; } 来去除边框,边框就没了 wxml: < ...

  3. 原创:新手布局福音!微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

  4. 微信小程序开发:学习笔记[4]——样式布局

    微信小程序开发:学习笔记[4]——样式布局 Flex布局 新的布局方式 在小程序开发中,我们需要考虑各种尺寸终端设备上的适配.在传统网页开发,我们用的是盒模型,通过display:inline | b ...

  5. 微信小程序button授权页面,用户拒绝后仍可再次授权

    微信小程序授权页面,进入小程序如果没授权跳转到授权页面,授权后跳转到首页,如果用户点拒绝下次进入小程序还是能跳转到授权页面,授权页面如下 app.js  中的 onLaunch或onShow中加如下代 ...

  6. 微信小程序——悬浮按钮

    关键:    position: fixed; wxml: <navigator url="/pages/issue/index"><image class='i ...

  7. 小北微信小程序之小白教程系列之 -- 样式(WXSS)

    为了适应广大的前端开发者,WXSS 具有 CSS 大部分 特性.同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改.与 CSS 相比,WXSS 扩展的特性有:尺寸单位和样式导入. ...

  8. 微信小程序——动态修改页面数据(和样式)及参数传递

    1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造 ...

  9. 微信小程序 button 组件

    button 组件 拥有强大的功能 自身可以拥有很多跟微信风格的样式,且是 表单 和 开放的能力 重要的 按钮 button 的属性: size: 类型 字符串 按钮的大小 属性值:default 默 ...

随机推荐

  1. mysql连接超时的问题处理

    1. 内网 ts 连接mysql 有时候会连接失败, 原因是 连接超时, 当时所有服务器一起启动,抢占资源,导致连接超过10s. 现在增加一次连接机会, 增加一些日志. 2. 并且对mysql 全局参 ...

  2. <a>标签中的href=""

    href="javascript:;",其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现 ...

  3. artTemplate(mark)

    一个渲染性能出众模板引擎,无论在 NodeJS 还是在浏览器中都可以运行. 特性 拥有接近 JavaScript 渲染极限的的性能 调试友好:语法.运行时错误日志精确到模板所在行:支持在模板文件上打断 ...

  4. VMware的使用-永久激活码

    1.在软件管理中下载安装VMware  版本为14.0   试用期为30天 2.在网上找的永久破解码 VMware 2018 v14.x 永久许可证激活密钥FF31K-AHZD1-H8ETZ-8WWE ...

  5. drop大表

    删除大表: .给对应表的ibd文件建立硬链接,因为表的数据和索引都在该文件中. ln /home/work/status.ibd /home/work/status.ibd.hdlk .主库上删除表, ...

  6. leetcode-973-最接近原点的K个点

    题目描述: 可参考:题215 方法一:排序 class Solution: def kClosest(self, points: List[List[int]], K: int) -> List ...

  7. mysql的卸载重装+导入大量数据失败的解决方案+工具执行和项目执行结果不同

    1.卸载 1>快捷键win+r输入regedit进入注册表 找到3个文件夹,全部删除 . HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eve ...

  8. C#,判断数字集合是否是连续的

    /// <summary> /// 判断数字集合是否是连续的 /// </summary> /// <returns></returns> public ...

  9. 在centos 6.9 x64下安装code::blocks步骤

    1.yum groupinstall "Development tools" 2.yum install gtk2* 3.安装wxWidgets 下载地址:https://www. ...

  10. IE6/IE7尿性笔记 && avalon && director

    表单提交 [ie6] form默认特性(input回车以及点击type=submit的按钮会自动触发form submit),在ie6中,不能使button[submit],必须是input[subm ...