微信小程序中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判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
Jul 07 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
js实现漫天星星效果
Jan 19 Javascript
Vue实现选择城市功能
May 27 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
javascript实现切割轮播效果
Nov 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模板,主要想体现一下思路
2006/12/25 PHP
php遍历数组的方法分享
2012/03/22 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
创建pycharm的自定义python模板方法
2018/05/23 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
详解python tkinter 图片插入问题
2020/09/03 Python
大学生收银员求职信分享
2014/01/02 职场文书
演讲稿祖国在我心中
2014/05/04 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
设计大赛策划方案
2014/06/13 职场文书
2014教师研修学习体会
2014/07/08 职场文书
水电工程师岗位职责
2015/02/13 职场文书
戒赌保证书
2015/05/11 职场文书
太行山上观后感
2015/06/05 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
2016大学优秀学生干部事迹材料
2016/03/01 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
Selenium浏览器自动化如何上传文件
2022/04/06 Python
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python