自定义按钮样式

fuyi501 发布于2019-08-29 15:16 / 1182人阅读

摘要：在一些网站上经常可以看到改造过的按钮选项比如这样由于之前一直在端企业，样式差不多就了所以也没去研究。

在一些网站上经常可以看到改造过的按钮选项比如这样

由于之前一直在B端企业，样式差不多就Ok了所以也没去研究。昨天刷百度前端学院的时候遇到一个题就是改造checkbox radio样式的，大概研究一番

最常见的自定义按钮样式，其实是用label模拟的,关于label可以在mdn进行查阅

label的for与表单的id对应，点击click对应的表单被激活
click

通过上面的例子知道了，只要label的for属性和表单的id对应，那么点击label就等于点击表单
这样我们可以通过把原本的input隐藏掉，改造label的样式就好了，来个最简单的实现

css
label {width: 16px;height: 16px;border:1px solid #d9d9d9;display:flex}
input {display: none}
.demo:checked+label {border: 1px solid red; font-weight: 700;}
.demo:checked+label::after {margin: auto;content: "";color: red;width: 8px;height: 8px;line-height: 8px;text-align: center;font-size: 12px;border-radius: 50%;background: red;}

html

云服务器 GPU云服务器自定义按钮样式自定义按钮 h5视频播放器可自定义样式按钮样式html

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113209.html

为你的网页添加深色模式

摘要：最近推出了新版的，并希望能够在浏览器中检测到新加入的深色模式。能够对页面容器上的边框阴影进行更新，使其在使用深色模式时不太透明。利用使用为按钮创建不同的样式和交互我们可以利用为深色和浅色主题的按钮创建不同的样式和悬停交互。翻译：疯狂的技术宅原文：https://www.creativebloq.com/... 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你...

gaosboy 2019-08-30 15:43 评论0 收藏0
css scrollbar样式设置

摘要：表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。一前言在CSS 中，如果我们在块级容器上设置了属性: overflow:scroll /* x y 方向都会*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 当块级内容区域...

104828720 2019-08-01 18:23 评论0 收藏0
css scrollbar样式设置

摘要：表示递增的按钮或轨道碎片，例如可以使区域向下或者向左移动的区域和按钮适用于按钮和轨道碎片。判断轨道结束的位置是否是一对按钮。一前言在CSS 中，如果我们在块级容器上设置了属性: overflow:scroll /* x y 方向都会*/ 或者 overflow-x:scroll /*只是x方向*/ 或者 overflow-y:scroll /*只是y方向*/ 当块级内容区域...

张春雷 2019-08-29 14:13 评论0 收藏0