分享好友教程首页教程搜索频道列表

在前端显示中修改单选默认样式变按钮

2021-06-30 11:327410
+关注32
核心提示:如果我们想要在前端显示中修改单选默认样式变按钮,以下为修改实例效果如图:原样...

如果我们想要在前端显示中修改单选默认样式变按钮,以下为修改实例

效果如图:

原样式

新样式:


如:

HTML代码

<div class="kzui-radio-no ui-radio-tab">
<input class="kzui-radio" type="radio" name="post[elite]" value="1" id="elite-1"><label for="elite-1" id="elite-1" class="tab-item tab-item-4"><span class="typetxt bold">是</span></label>
<input class="kzui-radio" type="radio" name="post[elite]" value="0" checked="" id="elite-0"><label for="elite-0" id="elite-0" class="tab-item tab-item-4"><span class="typetxt bold">否</span></label>
</div>


CSS

.ui-radio-tab input{display: none;}
.ui-radio-tab .tab-item{height: 35px; line-height: 35px; margin-bottom: 10px; margin-right: 10px; position: relative; text-align: center; border: 1px solid #e0e6ed; cursor: pointer; z-index: 1; display: block; float: left; width: 21%; margin-left: 0; border-radius: 3px; font-size: 14px;}
.ui-radio-tab .tab-item{padding-top: 0px;}
.ui-radio-tab input:checked+label{z-index: 2; border-color: rgba(39,105,220,.5); background: rgb(39 105 220); color: #ffffff !important;}


本文标签:#css#按钮#单选#样式
整理员:小黑
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

纯CSS实现多标签自动显示超出数量的思路详解

    有多个宽度不同的标签水平排列,当外层宽度不足时,会自动提示超出的数量,这篇文章主要介绍了纯 CSS 实现多标签自动显示超出数量的思路详解,需要的朋友可以参考下

小黑 CSS相关2026-07-20

使用CSS实现渐变圆角边框的效果

    这篇文章给大家介绍了如何使用CSS实现渐变圆角边框的效果,有没有发现在现如今的网站应用中,我们大量的使用到这类场景,在解决这类问题时,我们利用了css的mask与mask-composite属性

小黑 CSS相关2026-07-20

css3收货地址平行四边形的线条样式示例代码

    这篇文章主要介绍了css 收货地址平行四边形的线条样式示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

小黑 CSS相关2026-07-20

CSS实现空心尖角的示例代码

网络 CSS相关2026-07-20

CSS3用border写 空心三角箭头 (两种写法)

    之前一直在寻找这种空心三角箭头, 终于知道了原理! 自己记录一下,顺便分享给之前跟我一样想要的撸友们~

小黑 CSS相关2026-07-20

下一篇
我来说两句
抢沙发