微信小程序中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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 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
如何做到多笔资料的同步
2006/10/09 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
深入分析JSONP跨域的原理
2014/12/10 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
vue实现节点增删改功能
2019/09/26 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
python爬虫_实现校园网自动重连脚本的教程
2018/04/22 Python
python 检查文件mime类型的方法
2018/12/08 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
python基础 range的用法解析
2019/08/23 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
化工专业应届生求职信
2013/11/08 职场文书
工作会议欢迎词
2014/01/16 职场文书
创新比赛获奖感言
2014/02/13 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
会计专业求职信范文
2015/03/19 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
导游词之无锡梅园
2019/11/28 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang