相信很多小伙伴在开发小程序的时候都会碰到小程序Button默认样式的困扰,在重设样式的时候需要一次次的设置

分享一个自己在开发中的小方法:

CSS all 简写属性 将除 unicode-bidi 与 direction 之外的所有属性重设至其初始值,或继承值

而且 all 属性没有初始值

MDN例子附上 https://developer.mozilla.org/zh-CN/docs/Web/CSS/all

button{
all:initial;
 position: relative;
}

注意点1:button是行内元素,需要设置宽度的时候记得改为块级元素,否则宽度无效喔

注意点2:初始化完后,position会被设置为static,可能会导致button触发范围的异常,最好设置除static外的属性值。

微信小程序 buton清除默认样式的更多相关文章

  1. 微信小程序去除Button默认样式

    在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤. (一)实现效果1.实现前(默认样式): 2.实现后(去除默认 ...

  2. 更改微信小程序的组件默认样式

    checkbox /*checkbox 整体大小  */ .checkbox {      width: 12%;      /* height: 240rpx; */ } /*checkbox 选项 ...

  3. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  4. 微信小程序wxml和wxss样式

    对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...

  5. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  6. 微信小程序中placeholder的样式

    通常,现代浏览器大多支持::placeholder选择器,用于设置placeholder的样式,但是在微信小程序中并不支持这种方式,而是提供了一个专门的属性(placeholder-class)来处理 ...

  7. 微信小程序页面阻止默认滑动事件

    在页面上要加入一个悬浮的按钮,这个按钮需要可以拖动,在元素中使用catchtouchstart,catchtouchmove,catchtouchend来控制悬浮按钮的拖动,但是在ios系统中,微信小 ...

  8. 微信小程序,动态改变样式

    小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...

  9. 微信小程序button选中改样式-实现单选/多选

    小程序实现多button单选/多选 红色为选中状态 单选 多选 ①wxss /* pages/button-select/button-select.wxss */ .button_container ...

随机推荐

  1. git回退之git reset

    参考 https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E9%87%8D%E7%BD%AE%E6%8F%AD%E5%AF%86 https: ...

  2. spark集群搭建(三台虚拟机)——kafka集群搭建(4)

    !!!该系列使用三台虚拟机搭建一个完整的spark集群,集群环境如下: virtualBox5.2.Ubuntu14.04.securecrt7.3.6_x64英文版(连接虚拟机) jdk1.7.0. ...

  3. 利用Xshell配置ssh免密码登录虚拟机,进行虚拟机与物理机的传输

    先说一下 Xshell如何无密连接虚拟机: ssh登录提供两种认证方式:口令(密码)认证方式和密钥认证方式.其中口令(密码)认证方式是我们最常用的一种,这里介绍密钥认证方式登录到linux的方法.使用 ...

  4. pat 1058 A+B in Hogwarts(20 分)

    1058 A+B in Hogwarts(20 分) If you are a fan of Harry Potter, you would know the world of magic has i ...

  5. 【dp】Arrange the Schedule

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3538 题意:如题. 题解: 假如 一组数据 ...(n1)A.. ...

  6. TestNg练习001

    15分钟入门TestNG 阅读目录 TestNG介绍 在Eclipse中在线安装TestNG 在Eclipse中离线安装TestNg TestNG最简单的测试 TestNG的基本注解 TestNG中如 ...

  7. PostGIS 结合Openlayers以及Geoserver实现最短路径分析(一)

    环境: Win10 ArcMap10.4(用于数据处理) postgresql9.4 postgis2.2.3 pgRouting2.3(postgresql插件) ##附上本文配套素材下载地址:ht ...

  8. 20191017-6alpha week 2/2 Scrum立会报告+燃尽图 05

    此作业要求参见https://edu.cnblogs.com/campus/nenu/2019fall/homework/9802 一.小组情况 队名:扛把子 组长:迟俊文 组员:宋晓丽 梁梦瑶 韩昊 ...

  9. python 安装resquest

    本文链接:https://blog.csdn.net/charlotte1516/article/details/91991848 搬运是为了怕原链接失效,建议浏览原链接. 1.首先在开始栏搜索cmd ...

  10. https安全在哪里,原理是什么?

    转载请标明出处:http://blog.csdn.net/shensky711/article/details/52214842 本文出自: [HansChen的博客] Https通信基本过程 在通信 ...