时间戳

首页 > 解决方案 > 减少复选框/单选按钮组的重复 CSS 代码

css - 减少复选框/单选按钮组的重复 CSS 代码

问题描述

我有以下 CSS 样式复选框和单选按钮组，我喜欢通过组合设置的样式来缩短它 for.blg-buttons input[type=radio]和 for .blg-buttons input[type=checkbox]。目前，我为这些单独编写样式（即使两者的样式相同）并且不确定将它们组合的最佳方式。

通过在 CSS 中也使用嵌套的 span、span:hover 和 :not(:checked) 使代码变得更长一些。

/* App-Wide Radio Button Group */
/* Padding on the Span - Margin on the Label */
/* ========================================= */
.blg-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    flex-direction: row;
    flex: 1;
}

.blg-buttons input[type=radio] {
    visibility:hidden;
    width:0px;
    height:0px;
    overflow:hidden;
}

.blg-buttons label {
    display: flex;
    line-height: 0;
    font-size: 0.85vw;
    flex: 1;
    align-items: center;
    margin: 0.2vw;
    font-weight: 700;
 }

.blg-buttons input[type=radio]+span {
    cursor: pointer;
    display: flex;
    flex: 1;
    justify-content: center;
    vertical-align: top;
    line-height: 1;
    font-size: 1vw;
    padding: .5vw;
    border-radius: .35vw;
    border: .15vw solid #333;
    /*width: 90%;*/
    /* text-align: center; <-- you don't need this with flex */
    color: #333;
    background: #eee;
    text-align: center;
}

/* button colors */
.blg-buttons input[type=radio]:not(:checked) + span {
    cursor: pointer;
    background-color: #EEE;
    color: #333;
}

/* button colors */
.blg-buttons input[type=radio]:not(:checked) + span:hover{
    cursor: pointer;
    background: #888;
}

/* button colors */
.blg-buttons input[type=radio]:checked + span{
    cursor: pointer;
    background-color: #333;
    color: #EEE;
}


.blg-buttons input[type=checkbox] {
    visibility:hidden;
    width:0px;
    height:0px;
    overflow:hidden;
}

.blg-buttons input[type=checkbox]+span {
    cursor: pointer;
    display: flex;
    flex: 1;
    justify-content: center;
    vertical-align: top;
    line-height: 1;
    font-size: 1vw;
    padding: .5vw;
    border-radius: .35vw;
    border: .15vw solid #333;
    /*width: 90%;*/
    /* text-align: center; <-- you don't need this with flex */
    color: #333;
    background: #eee;
    text-align: center;
}

/* button colors */
.blg-buttons input[type=checkbox]:not(:checked) + span {
    cursor: pointer;
    background-color: #EEE;
    color: #333;
}

/* button colors */
.blg-buttons input[type=checkbox]:not(:checked) + span:hover{
    cursor: pointer;
    background: #888;
}

/* button colors */
.blg-buttons input[type=checkbox]:checked + span{
    cursor: pointer;
    background-color: #333;
    color: #EEE;
}
/* =========== */

即我可以将.blg-buttons input[type=radio]:checked + spanand组合.blg-buttons input[type=checkbox]:checked + span成一个组.blg-buttons input[type=checkbox & radio]:checked + span，或者类似的东西吗？

我也可以嵌套这样的东西吗？：

.blg-buttons {
    label { }
    ... 
}

非常感谢任何有关如何缩短此 CSS 的帮助，谢谢！

标签： cssreactjs

解决方案

你可以做以下事情

CSS

input[type=radio], input[type=checkbox] 
    { 
       //here should be your css
 }

SCSS/LESS

.blg-buttons {
  input[type=radio] {}
  input[type=checkbox] {}

}

推荐阅读