大家好,欢迎来到IT知识分享网。
切图笔记记录切图网日常,说到网页的表单美化 通常需要用到插件,因为 select,radio,checkbox比较特殊,无法通过css直接美化 ,这些也有比较不错的美化插件 可以实现,不过这都是早几年的情况,现在浏览器日益更新升级,对于html5 css3标准支持的更好,使得我们现在可以通过css3也可以进行美化,没有插件参与,就可以省事不少,同时也可以让页面代码更加简洁,用到了图片背景,不过是基于data:image 方式直接引用的,所以不用到实体图片。
![(切图笔记)通用的纯css3实现 单选框 复选框 的美化 附代码 亲测好用插图1 (切图笔记)通用的纯css3实现 单选框 复选框 的美化 附代码 亲测好用](https://yundeesoft.com/wp-content/uploads/2022/11/2022112316405970.jpg)
复制以下代码即可实现 单选 复选美化,亲测好用。
input[type=”radio”],
input[type=”checkbox”]{
width: 1em;
height: 1em;
margin-top: 0;
vertical-align: top;
appearance: none;
background-color: #fff;
background-image: var(–bs-form-check-bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 2px solid #e6e6e6;
print-color-adjust: exact;
cursor: pointer;
border-width: 0.125rem;
width: 1.25rem;
height: 1.25rem;
border-color: #e7e7e7;
}
input[type=”radio”]:active,
input[type=”checkbox”]:active{
filter: brightness(90%);
}
input[type=”radio”]:focus,
input[type=”checkbox”]:focus{
border-color: #fd7e14;
box-shadow: rgba(253, 126, 20, 0.1);
}
input[type=”radio”]{
border-radius: 50%;
}
input[type=”checkbox”]{
border-radius: 0.25em;
}
input[type=”radio”]:checked{
background-color: #fd7e14;
border-color: #fd7e14;
background-image: url(“data:image/svg+xml,<svg xmlns=’http://www.w3.org/2000/svg’ viewBox=’-4 -4 8 8′><circle r=’2′ fill=’%23fff’/></svg>”);
}
input[type=”checkbox”]:checked{
background-color: #fd7e14;
border-color: #fd7e14;
background-image: url(“data:image/svg+xml,<svg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 20 20′><path fill=’none’ stroke=’%23fff’ stroke-linecap=’round’ stroke-linejoin=’round’ stroke-width=’3′ d=’m6 10 3 3 6-6’/></svg>”);
}
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/75319.html