单选框、复选框点击添加相应样式（自定义背景图片）

最新推荐文章于 2023-06-27 10:48:08 发布

火火火火_Shy

最新推荐文章于 2023-06-27 10:48:08 发布

阅读量804

点赞数

分类专栏： css javascript 文章标签： vue checkbox js

本文链接：https://blog.csdn.net/yangmy_Shy/article/details/106660645

版权

这篇博客介绍了如何在Vue项目中使用JavaScript和CSS实现单选框及复选框的点击效果，通过设置不同的背景图片（雪碧图）展示未选中、选中和鼠标悬停的状态。内容包括CSS样式设置、HTML结构以及JavaScript数据处理，例如`billTypeList`和`billMoneyList`的数据数组，以及`currentBillMoneyIndex`、`isNoWay01`等状态变量。此外，`methods`部分可能包含处理这些组件交互的逻辑。

摘要由CSDN通过智能技术生成

图片是雪碧图（未选中，选中，鼠标移上去的样式）

css:

.billSelectIpt {
    font-size:14px;
    color:rgba(51,51,51,1);
}

.billSelectIpt input[type='radio']+label {
    margin: 4px 5px -2px 0;
    background: url(../images/billRadioIcons.png) 0 0 no-repeat;
    cursor: pointer;
    padding-left: 23px;
    height: 14px;
}
.billSelectIpt input[type='radio']:hover+label {
    background: url(../images/billRadioIcons.png) 0 -24px no-repeat;
    color: #298EF8;
}
.billSelectIpt input[type='radio']:checked:hover+label {
    background: url(../images/billRadioIcons.png) 0 -48px no-repeat;
    color: #298EF8;
}
.billTicketChecked {
    color: #298EF8;
}
.billTicketChecked label{
    background: url(../images/billRadioIcons.png) 0 -48px no-repeat!important;
}

.billSelectIpt input[type='checkbox']+label {
    margin: 4px 5px -2px 0;
    background: url(../images/billCheckboxIcons.png) 0 0 no-repeat;
    cursor: pointer;
    padding-left: 23px;
    height: 14px;
}

.billSelectIpt input[type='checkbox']+label span {
    position: relative;
    top: -4px;
}

.billSelectIpt input[type='checkbox']:hover+label {
    background: url(../images/billCheckboxIcons.png) 0 -

最低0.47元/天解锁文章

火火火火_Shy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单选框、复选框点击添加相应样式（自定义背景图片）

图片是雪碧图（未选中，选中，鼠标移上去的样式）css:.billSelectIpt { font-size:14px; color:rgba(51,51,51,1);}.billSelectIpt input[type='radio']+label { margin: 4px 5px -2px 0; background: url(../images/billRadioIcons.png) 0 0 no-repeat; cursor: pointer;
复制链接

扫一扫

专栏目录