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

(一)实现效果
1、实现前(默认样式):

2、实现后(去除默认边框和背景色):

(二)实现过程
1、使用::after 伪类选择器,因为button的边框样式是通过::after方式实现的,如果在button上定义边框就会出现两条边框线,所以我们可以使用::after的方式去覆盖默认值。

button::after {
   border: none;
}

2、还需要在将按钮背景色设置为白色,因为按钮默认背景色是灰色的。

button {
background-color: #fff;
}

这样两步就可以搞定小程序按钮默认样式了,只是相当于一个文本的样式,还是有很多button的默认样式没有去除的,这个需要根据个人需求来设置的,这里不过多说明,如果需要自定义可以在按钮上一个类选择器就可以搞定。

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

  1. 微信小程序 buton清除默认样式

    相信很多小伙伴在开发小程序的时候都会碰到小程序Button默认样式的困扰,在重设样式的时候需要一次次的设置 分享一个自己在开发中的小方法: CSS all 简写属性 将除 unicode-bidi 与 ...

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

    小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 n ...

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

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

  4. 小程序 -- 去掉button默认样式

    button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; p ...

  5. 微信小程序去除button边框

    button::after{ border: none; } 去button的背景

  6. 微信小程序的button按钮设置宽度无效

    亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 ...

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

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

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

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

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

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

随机推荐

  1. DAY2-MySQL专业安装

    MySQL安装 安装方法: 1.源码 2.二进制 (建议使用) 3.rpm (尽量不用) 一.下载MySQL: 一定要从官网下载,防止被勒索. 官网: http://dev/mysql.com 版本: ...

  2. sublime text3汉化

    注意在安装 sublime text3 时勾选Add to explorer context menu,这样在右键单击文件时就可以直接使用Sublime Text打开. 下载Package Contr ...

  3. bzoj 3166 可持久化Tire

    每一个数能做出的贡献就是其两端第二个比他大的中间的数和他的异或值 按权值大小排序,按照位置扔进set,set内的元素都是比他大的,也是全的 然后Tire上跑就行了.. #include<cstd ...

  4. STL--multiset用法

    multiset: multiset<int>s; 定义正向迭代器与正向遍历: multiset<int>::iterator it; for(it=s.begin();it! ...

  5. BZOJ_1800_[Ahoi2009]fly 飞行棋_乱搞

    BZOJ_1800_[Ahoi2009]fly 飞行棋_乱搞 Description 给出圆周上的若干个点,已知点与点之间的弧长,其值均为正整数,并依圆周顺序排列. 请找出这些点中有没有可以围成矩形的 ...

  6. spss汉化详解

    今天写一下关于SPSS的汉化以及激活码 下载spss: 安装过程比较简单,主要就是激活码: 9DNCAF2O3QVDV7FBIO696OO6GWLNXZPPRYTPWF2PPX7C8T6Y24LMVV ...

  7. ply python 图片压缩 图片裁剪 旋转

    http://tech.seety.org/python/python_imaging.html

  8. Chapter1:基础

    整本书的核心:语言的设计与实现 我们所看到的设计是显示的,语法定义的, 而实现是隐式的,决定了编译或运行时的行为. 了解设计的目的,可以推测实现的细节,也可以自己实现设计. 学习具体的实现,更充分的达 ...

  9. set的便捷操作

    认识集合 由一个或多个确定的元素所构成的整体叫做集合. 集合中的元素有三个特征: 1.确定性(集合中的元素必须是确定的) 2.互异性(集合中的元素互不相同.例如:集合A={1,a},则a不能等于1) ...

  10. HTTP协议中GET和POST区别

    GET一般用于获取和查询资源信息:POST一般用于更新信息,表示可能修改服务器上资源的请求 GET请求一般是幂等的 GET请求数据会附加在url之后,POST请求数据放到request-body中 G ...