相信很多小伙伴在开发小程序的时候都会碰到小程序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. springcloud微服务基于redis集群的单点登录

    springcloud微服务基于redis集群的单点登录 yls 2019-9-23 简介 本文介绍微服务架构中如何实现单点登录功能 创建三个服务: 操作redis集群的服务,用于多个服务之间共享数据 ...

  2. xposed实现个人收款免签支付

    想必很多程序员都有这样的烦恼,想做个人网站,但如何实现收款功能? 今天我就给大家分享一下我的实现方案:基于xposed逆向框架实现微信免签支付.支付宝免签支付 接下来给大家简单分享一下实现过程,这个过 ...

  3. nyoj 264-国王的魔镜 (string[-1:-int(str_len/2+1):-1])

    264-国王的魔镜 内存限制:64MB 时间限制:3000ms 特判: No 通过数:13 提交数:25 难度:1 题目描述: 国王有一个魔镜,可以把任何接触镜面的东西变成原来的两倍——只是,因为是镜 ...

  4. JavaWeb核心知识点

    一:HTTP协议     一.概述 1. 概念:超文本传输协议 2. 作用:规范了客户端(浏览器)和服务器的数据交互格式 3. 特点 1. 简单快速:客户端向服务器请求服务时,仅通过键值对来传输请求方 ...

  5. 力扣(LeetCode)验证回文串 个人题解

    给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写. 说明:本题中,我们将空字符串定义为有效的回文串. 示例 1: 输入: "A man, a plan, a c ...

  6. UML分析AsyncDisplayKit框架-ASMuplexImageNode异步下载时序图。

    PS:博客园图片服务器不正常工作,数据上传后服务器返回http500,园方迟迟还没解决. 我从2016-01-18 05:52向园方反馈问题-请问博客园的图片服务器有在正常运行吗,至此时2016-01 ...

  7. 原生js实现简单的下拉加载

    #获取当前滚动条的高度document.documentElement.scrollTop #获取当前窗口的高度 document.documentElement.clientHeight #获取当前 ...

  8. Java中的工具类究竟如何命名?

    先来几个例子 JDK自带工具类 Arrays.asList(); Objects.equals(); Collections.sort(); Spring框架工具类 StringUtils.isEmp ...

  9. Python--将文件夹中图片按照横屏竖屏进行分类

    搬运链接:https://www.jianshu.com/p/c8be54282e77 """ 可以遍历输入的路径的指定后缀的文件,主要是用来筛选图片,将图片分成 横屏, ...

  10. Kibana笔记

    • 根据id查询 GET index_1/doc/1 • 全文检索 GET index_1/doc/_search GET index_1/doc/_search{ "query" ...