微信小程序去除Button默认样式
在小程序开发过程中,使用率蛮高的组件button,因为经常要去除默认样式,然后再自定义样式,所以经常写,自己也总结分享一下简单的实现步骤。
(一)实现效果
1、实现前(默认样式):
2、实现后(去除默认边框和背景色):
(二)实现过程
1、使用::after 伪类选择器,因为button的边框样式是通过::after方式实现的,如果在button上定义边框就会出现两条边框线,所以我们可以使用::after的方式去覆盖默认值。
button::after {
border: none;
}
2、还需要在将按钮背景色设置为白色,因为按钮默认背景色是灰色的。
button {
background-color: #fff;
}
这样两步就可以搞定小程序按钮默认样式了,只是相当于一个文本的样式,还是有很多button的默认样式没有去除的,这个需要根据个人需求来设置的,这里不过多说明,如果需要自定义可以在按钮上一个类选择器就可以搞定。
微信小程序去除Button默认样式的更多相关文章
- 微信小程序 buton清除默认样式
相信很多小伙伴在开发小程序的时候都会碰到小程序Button默认样式的困扰,在重设样式的时候需要一次次的设置 分享一个自己在开发中的小方法: CSS all 简写属性 将除 unicode-bidi 与 ...
- 微信小程序去除button按钮的边框
小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 n ...
- 更改微信小程序的组件默认样式
checkbox /*checkbox 整体大小 */ .checkbox { width: 12%; /* height: 240rpx; */ } /*checkbox 选项 ...
- 小程序 -- 去掉button默认样式
button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; p ...
- 微信小程序去除button边框
button::after{ border: none; } 去button的背景
- 微信小程序的button按钮设置宽度无效
亲,你是不是也遇到了微信小程序的button按钮设置宽度无效.让我来告诉你怎么弄 方法1. 样式中加入!important,即:width: 100% !important; wxss代码示例 1 2 ...
- 微信小程序的布局css样式
微信小程序的布局css样式width: fit-content;font-size:20px; /*设置文字字号*/color:red; /*设置文字颜色*/font-w ...
- 微信小程序wxml和wxss样式
对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...
- 微信小程序 JS动态修改样式
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
随机推荐
- EDM模板编写踩坑指南(非响应式,纯table有源码)
如果问你table布局,你肯定会嗤之以鼻?什么table布局?不是早已经淘汰了吗?但是如果让你写EDM邮件模板,table布局相对来说是最好的选择. 如果让你立刻写EDM,你在网上搜的话,得到的信息相 ...
- XML解析的四种方法 建议使用demo4j解析 测试可以用
https://www.cnblogs.com/longqingyang/p/5577937.html 4.DOM4J解析 特征: 1.JDOM的一种智能分支,它合并了许多超出基本XML文档表示的功 ...
- CSS布局十八般武艺都在这里了
CSS布局十八般武艺都在这里了 Shelley Lee 4 个月前 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中.垂直居中方法,以及单列布局.多列布局的多种实现方式 ...
- 你不知道的JavaScript--Item26 异步的脚本加载
先来看这行代码: <script src = "allMyClientSideCode.js"></script> 这有点儿--不怎么样."这该放 ...
- VMware12下CentOS 7安装教程
CentOS 7 DVD安装光盘(百度搜索CentOS即可找到官方主页):VMware Workstation 12 Pro及以上软件: 启动VMware Workstation 12 Pro程序,在 ...
- 转载:python + requests实现的接口自动化框架详细教程
转自https://my.oschina.net/u/3041656/blog/820023 摘要: python + requests实现的接口自动化框架详细教程 前段时间由于公司测试方向的转型,由 ...
- c# 如何读取web.config中的内容(ConfigurationManager)
1.web.config中写入 <appSettings> <add key="TokenQPark" value="http://localho ...
- FTP连接池
我们项目使用的是 Apache的(commons-net-3.2.jar) FTPClient,但是系统偶尔会有异常,趁着刚解决完,总结一下. 日志中提示是类似 java.lang.Exception ...
- BZOJ_5296_[Cqoi2018]破解D-H协议_BSGS
BZOJ_5296_[Cqoi2018]破解D-H协议_BSGS Description Diffie-Hellman密钥交换协议是一种简单有效的密钥交换方法.它可以让通讯双方在没有事先约定密钥(密码 ...
- 虚拟机console基础环境部署——系统基础环境
1. 概述2. 工具类安装2.1 安装vim2.2 安装tree2.3 安装expect2.4 安装lsof3. 编译环境类安装 1. 概述 本系列博客是在最小化安装CentOS6.5的基础上,通过配 ...