微信小程序中button去除默认的边框实例代码


Posted in Javascript onAugust 01, 2019

微信小程序中button去除默认的边框的实现方法如下所示:

button {
 position:relative;
 display:block;
 margin-left:auto;
 margin-right:auto;
 padding-left:14px;
 padding-right:14px;
 box-sizing:border-box;
 font-size:18px;
 text-align:center;
 text-decoration:none;
 line-height:2.55555556;
 border-radius:5px;
 -webkit-tap-highlight-color:transparent;
 overflow:hidden;
 color:#000000;
 background-color:#F8F8F8;
}

这是button默认自带的css样式

正常来说,去除button我们使用如下代码即可

button{
 border:none;
}
或者
button{
 outline: none;
}

但是有时候却不起作用,这个时候我们可以使用::after 伪类选择器,因为button的边框样式是通过::after方式实现的,如果在button上定义边框就会出现两条边框线,所以我们可以使用::after的方式去覆盖默认值。

button::after {
 border: none;
}

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

总结

以上所述是小编给大家介绍的微信小程序中button去除默认的边框实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
使用Js让Html中特殊字符不被转义
Nov 05 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
Vue slot用法(小结)
Oct 22 Javascript
laydate如何根据开始时间或者结束时间限制范围
Nov 15 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
vue-router两种模式区别及使用注意事项详解
Aug 01 #Javascript
jQuery中DOM常见操作实例小结
Aug 01 #jQuery
JS浮点数运算结果不精确的Bug解决
Aug 01 #Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 #Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 #Javascript
jQuery中DOM操作原则实例分析
Aug 01 #jQuery
详解package.json版本号规则
Aug 01 #Javascript
You might like
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
Firefox div高度自适应
2009/04/28 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
js switch case default 的用法示例介绍
2013/10/23 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
Vue2.x通用编辑组件的封装及应用详解
2019/05/28 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
2分钟实现一个Vue实时直播系统的示例代码
2020/06/05 Javascript
python冒泡排序算法的实现代码
2013/11/21 Python
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
Python单元测试实例详解
2018/05/25 Python
Python转换时间的图文方法
2019/07/01 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
德国运动营养和健身网上商店:Myprotein.de
2018/07/18 全球购物
Rossignol金鸡美国官网:始于1907年法国百年雪具品牌
2019/03/06 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
考试退步检讨书
2014/01/15 职场文书
八年级数学教学反思
2014/01/31 职场文书
保密普查工作实施方案
2014/02/25 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
股东授权委托书
2014/10/15 职场文书