微信小程序中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 相关文章推荐
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
js弹出对话框方式小结
Nov 17 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
详解微信小程序调用支付接口支付
Apr 28 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 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/10/09 PHP
php通过session防url攻击方法
2014/12/10 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
js 目录列举函数
2008/11/06 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
2015/03/01 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
JS hashMap实例详解
2016/05/26 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
Vue微信项目按需授权登录策略实践思路详解
2018/05/07 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
TensorFlow平台下Python实现神经网络
2018/03/10 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python实现维吉尼亚算法
2019/03/20 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
django rest framework serializers序列化实例
2020/05/13 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
python与js主要区别点总结
2020/09/13 Python
Currentbody西班牙:美容仪专家
2019/09/28 全球购物
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
校园门卫岗位职责
2013/12/09 职场文书
《争吵》教学反思
2014/02/15 职场文书
新闻发布会策划方案
2014/06/12 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
销售内勤岗位职责
2015/02/10 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
趣味运动会广播稿
2015/08/19 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
python创建字典及相关管理操作
2022/04/13 Python