在小程序开发过程中,使用率蛮高的组件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. 关于js中对象和函数的一道问题

    今天在写代码的时候遇到一个问题,没有解决,又在sf上提问了..冏..,最后讨论良久终于解决,和往常一样,做一个备忘,最近打算把印象笔记里的东西迁来.具体可访问http://segmentfault.c ...

  2. 利用pytesser识别图形验证码

    简单识别 1.一般思路 验证码识别的一般思路为: 图片降噪 图片切割 图像文本输出 1.1 图片降噪 所谓降噪就是把不需要的信息通通去除,比如背景,干扰线,干扰像素等等,只剩下需要识别的文字,让图片变 ...

  3. Linux.安装phantomjs

    PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...

  4. django(权限、认证)系统——User模型

    在Django的世界中,在权限管理中有内置的Authentication系统.用来管理帐户,组,和许可.还有基于cookie的用户session.这篇blog主要用来探讨这套内置的Authentica ...

  5. CAD中用户选择实体

    在CAD的很多操作中都会有需要用户选择实体的时候,这里将我最近项目中用到的方法分享一下,程序原意是希望用户选择一个单行文本或者多行文本,并返回所选文本的内容,直接上代码: CString CPaint ...

  6. Postman----支持markdown可自动生成接口文档

    1.postman支持markdown作为集合中的请求,对集合和文件夹进行文字描述的方式,您可以嵌入屏幕截图和其他图像已获得更多描述性的介绍. 2.已markdown语法为准,填写自己想要展示的内容 ...

  7. 基于SpringBoot从零构建博客网站 - 整合lombok和mybatis-plus提高开发效率

    在上一章节中<技术选型和整合开发环境>,确定了开发的技术,但是如果直接这样用的话,可能开发效率会不高,为了提高开发的效率,这里再整合lombok和mybatis-plus两个组件. 1.l ...

  8. Java中ArrayList学习笔记

    1. 先看两段代码 这段代码在执行的时候会报 但是这样写就好着呢: 总结,研究报错的代码 ,在for循环的时候调用next()方法,next方法中调用了checkForComodification这个 ...

  9. 一文带你超详细了解Cookie

    cookie 简介 什么是 cookie cookie,有时我们也用其复数形式 cookies,是服务端保存在浏览器端的数据片段.以 key/value的形式进行保存.每次请求的时候,请求头会自动包含 ...

  10. jquery版 发同步请求 自定义头部信息 公共请求体

    //jquery版 发同步请求 function getData(url,param,fn){ var Authorization=localStorage.getItem("Authori ...