微信小程序去除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 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
随机推荐
- Linux时间子系统之八:动态时钟框架(CONFIG_NO_HZ、tickless)
在前面章节的讨论中,我们一直基于一个假设:Linux中的时钟事件都是由一个周期时钟提供,不管系统中的clock_event_device是工作于周期触发模式,还是工作于单触发模式,也不管定时器系统是工 ...
- 深入JVM分析spring-boot应用hibernate-validator
问题 可重现的Demo代码:demo.zip 最近排查一个spring boot应用抛出hibernate.validator NoClassDefFoundError的问题,异常信息如下: Caus ...
- linux下如何配置yum源
first:挂载本地镜像文件(挂载:意为将某个文件放置在系统的一个目录下) mkdir /media/cdrom #新建镜像文件挂载目录 cd /usr/local/src ...
- git fatal: 远程 origin 已经存在。
不小心将git远程地址配错了,再次配置提示以下错误: fatal: 远程 origin 已经存在. 此时只需要将远程配置删除,重新添加即可: git remote rm origin git remo ...
- Python logger /logging
# !/user/bin/python # -*- coding: utf-8 -*- ''' subprocess : 需要在linux平台上测试 shell logging ''' import ...
- TestNG监听器实现用例运行失败自动截图、重运行功能
注: 以下内容引自 http://blog.csdn.net/sunnyyou2011/article/details/45894089 (此非原出处,亦为转载,但博主未注明原出处) 使用Testng ...
- springboot中使用自定义两级缓存
工作中用到了springboot的缓存,使用起来挺方便的,直接引入redis或者ehcache这些缓存依赖包和相关缓存的starter依赖包,然后在启动类中加入@EnableCaching注解,然后在 ...
- conn.go 源码阅读
), Conn: conn, } return k, v } // 返回远程节点地址 func (self *Connect) Addr() string { ...
- upload.go
package api import ( "os" "bytes" "mime/multipart" &qu ...
- BZOJ_1180_[CROATIAN2009]OTOCI_LCT
BZOJ_1180_[CROATIAN2009]OTOCI_LCT Description 给出n个结点以及每个点初始时对应的权值wi.起始时点与点之间没有连边.有3类操作: 1.bridge A ...