微信小程序中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 相关文章推荐
javascript 闭包疑问
Dec 30 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 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中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
用倒置滤镜把div倒置,再把table倒置。
2007/07/31 Javascript
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
关于python的list相关知识(推荐)
2017/08/30 Python
详解Python中where()函数的用法
2018/03/27 Python
python实现微信自动回复功能
2018/04/11 Python
对Python中9种生成新对象的方法总结
2018/05/23 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python如何生成xml文件
2020/06/04 Python
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
高中自我评价分享
2013/12/05 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
普通党员整改措施
2014/10/24 职场文书
跑吧孩子观后感
2015/06/10 职场文书
领导新年致辞2016
2015/07/29 职场文书
体育部部长竞选稿
2015/11/21 职场文书
领导干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python