微信小程序中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 相关文章推荐
Flash+XML滚动新闻代码 无图片 附源码下载
Nov 22 Javascript
javascript new后的constructor属性
Aug 05 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
JS字符串和数组如何实现相互转化
Jul 02 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
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
AngularJS监听路由的变化示例代码
2016/09/23 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
微信小程序websocket实现聊天功能
2020/03/30 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
Django 实现购物车功能的示例代码
2018/10/08 Python
python实现在cmd窗口显示彩色文字
2019/06/24 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
Python list与NumPy array 区分详解
2019/11/06 Python
python中Lambda表达式详解
2019/11/20 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
会计自我鉴定
2013/11/02 职场文书
老师对学生的寄语
2014/04/09 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
公务员个人考察材料
2014/12/23 职场文书
综合测评个人总结
2015/03/03 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
JavaScript流程控制(循环)
2021/12/06 Javascript