微信小程序中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 相关文章推荐
区分JS中的undefined,null,"",0和false
Mar 08 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
jquery实现全选和全不选功能效果的实现代码【推荐】
May 05 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
vue debug 二种方法
Sep 16 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
微信小程序 自定义复选框实现代码实例
Sep 04 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
js实现打字小游戏
Dec 17 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
Jan 28 Javascript
threejs太阳光与阴影效果实例代码
Apr 05 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生成月历代码
2007/06/14 PHP
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
javascript 中的 delete及delete运算符
2015/11/15 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
[00:12]2018DOTA2亚洲邀请赛 sylar表现SOLO技艺
2018/04/06 DOTA
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
python运行其他程序的实现方法
2017/07/14 Python
python笔记之mean()函数实现求取均值的功能代码
2019/07/05 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
python 8种必备的gui库
2020/08/27 Python
python简单实现9宫格图片实例
2020/09/03 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
中医药大学毕业生自荐信
2013/11/08 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
咖啡店创业计划书
2014/08/15 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
2014年话务员工作总结
2014/11/19 职场文书
浅谈python中的多态
2021/06/15 Python
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers
设置IIS Express并发数
2022/07/07 Servers
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS