相信很多小伙伴在开发小程序的时候都会碰到小程序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. Hybrid App: 看看第三方WebViewJavascriptBridge是如何来实现Native和JavaScript交互

    一.简介 在前面两篇文章中已经介绍了Native与JavaScript交互的几种方式,依次是JavaScriptCore框架.UI组件UIWebView.WebKit框架,这几种方式都是苹果公司提供的 ...

  2. Python数据可视化之matplotlib

    常用模块导入 import numpy as np import matplotlib import matplotlib.mlab as mlab import matplotlib.pyplot ...

  3. SqlServer2005 查询 第三讲 between

    在数据库的查询中最重要的是要知道命令的顺序,因为在sql命令中有许多的参数,例如distinct,top,in,order by,group by.......如果你不能理解什么时候该执行什么的话,很 ...

  4. (C#)WPF:Grid面板介绍

    Grid:网格面板 Grid和其他各个Panel比较起来,功能最多也最为复杂.要使用Grid,首先要向RowDefinitions和ColumnDefinitions属性中添加一定数量的RowDefi ...

  5. pat 1084 Broken Keyboard(20 分)

    1084 Broken Keyboard(20 分) On a broken keyboard, some of the keys are worn out. So when you type som ...

  6. react-router重定向

    ① ②通过this.props重定向

  7. Android中的设计模式

    一.设计模式的分类 总体来说23种设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式 ...

  8. Linux虚拟机扩容根分区CentOs6.9 VMware14

    1.首先关闭虚拟机点击编辑虚拟机设置 2.点击想要扩容的硬盘点击扩容 3.增加容量 输入想增加的容量,因为我本身是30G写到35G是加了5G不是增加30G.(此处为了演示只增加5G) 4.开启虚拟机 ...

  9. day 18 random模块 时间模块 sys模块 os模块

    import random 利用random模块可以进行从一个列表或者数字范围之间随机取出一个数字 # 取随机小数 : 数学计算 print(random.random()) # 取0-1之间的小数 ...

  10. 通俗化讲解JWT鉴权的使用场景及结构安全

    一.基于Session的应用开发的缺陷 在我们传统的B\S应用开发方式中,都是使用session进行状态管理的,比如说:保存登录.用户.权限等状态信息.这种方式的原理大致如下: 用户登陆之后,将状态信 ...