Html 将css赋予复选框_Html_Css_Checkbox

Html 将css赋予复选框

html css checkbox

Html 将css赋予复选框,html,css,checkbox,Html,Css,Checkbox,我是CSS新手我想给刚刚在图像中显示的复选框添加CSS 我已经试过了，但是屏幕上出现了复选框，当我选择一个类别时，它的背景将是黄色的多谢各位 .radio\u切换{ 浮动：左； } .收音机开关标签{ 浮动：左；宽度：100px；溢出：自动； } .radio_切换标签范围{ 文本对齐：居中；字体大小：15px；填充：5px0px；显示：块； } .radio_切换标签输入{ 位置：绝对位置； } .无线电开关.地点{ 背景色：#edf1f2；颜色：#58666e；最小高度

我是CSS新手

我想给刚刚在图像中显示的复选框添加CSS

我已经试过了，但是屏幕上出现了复选框，当我选择一个类别时，它的背景将是黄色的

多谢各位

.radio\u切换{
浮动：左；
}
.收音机开关标签{
浮动：左；
宽度：100px；
溢出：自动；
}
.radio_切换标签范围{
文本对齐：居中；
字体大小：15px；
填充：5px0px；
显示：块；
}
.radio_切换标签输入{
位置：绝对位置；
}
.无线电开关.地点{
背景色：#edf1f2；
颜色：#58666e；
最小高度：100%！重要；
边框：薄#ced9db实心；
边框左上半径：3px；
边框左下半径：3px；
}


类别
类别
类别

您可以使用两种方法完成此操作

使用JavaScript或CSS

对于CSS，它非常简单。您必须使用

：checked

属性

.radio_toggle[type=checkbox] + label {
  // Code on how to look before checked
} 
input[type=checkbox]:checked + label {
  // Code on how to look after checked
}

对于JS，您首先必须使用

radio\u toggle

元素，然后监听是否已检查，对于您的情况，哪个元素看起来像这样

var element = document.getElementsByClassName("radio_toggle").checked = true;
function check(element) {
    element.checked = true;
    element.style.color = "Color you desire"

}

您可以使用两种方法来实现这一点

使用JavaScript或CSS

对于CSS，它非常简单。您必须使用

：checked

属性

.radio_toggle[type=checkbox] + label {
  // Code on how to look before checked
} 
input[type=checkbox]:checked + label {
  // Code on how to look after checked
}

对于JS，您首先必须使用

radio\u toggle

元素，然后监听是否已检查，对于您的情况，哪个元素看起来像这样

var element = document.getElementsByClassName("radio_toggle").checked = true;
function check(element) {
    element.checked = true;
    element.style.color = "Color you desire"

}

要隐藏

输入

，请给它

显示：无，已更新CSS规则
.radio_toggle label input {
  display: none;
}

.radio_toggle label input:checked + span {
  color: white;
  background: gold;
}

要给按钮添加颜色，请使用：选中的
选择器，添加CSS规则
.radio_toggle label input {
  display: none;
}

.radio_toggle label input:checked + span {
  color: white;
  background: gold;
}

样品

.radio\u切换{
浮动：左；
}
.收音机开关标签{
浮动：左；
宽度：100px；
溢出：自动；
}
.radio_切换标签范围{
文本对齐：居中；
字体大小：15px；
填充：5px0px；
显示：块；
}
.无线电开关.地点{
背景色：#edf1f2；
颜色：#58666e；
最小高度：100%！重要；
边框：薄#ced9db实心；
边框左上半径：3px；
边框左下半径：3px；
}
.radio_切换标签输入{
显示：无；
}
.radio_切换标签输入：选中+范围{
颜色：白色；
背景：金；
}

类别
类别
类别
要隐藏输入
，请给它显示：无，已更新CSS规则
.radio_toggle label input {
  display: none;
}

.radio_toggle label input:checked + span {
  color: white;
  background: gold;
}

要给按钮添加颜色，请使用：选中的
选择器，添加CSS规则
.radio_toggle label input {
  display: none;
}

.radio_toggle label input:checked + span {
  color: white;
  background: gold;
}

样品

.radio\u切换{
浮动：左；
}
.收音机开关标签{
浮动：左；
宽度：100px；
溢出：自动；
}
.radio_切换标签范围{
文本对齐：居中；
字体大小：15px；
填充：5px0px；
显示：块；
}
.无线电开关.地点{
背景色：#edf1f2；
颜色：#58666e；
最小高度：100%！重要；
边框：薄#ced9db实心；
边框左上半径：3px；
边框左下半径：3px；
}
.radio_切换标签输入{
显示：无；
}
.radio_切换标签输入：选中+范围{
颜色：白色；
背景：金；
}

类别
类别
类别
正如@UnknownDeveloper所指出的，您必须使用javascript来实现这一点。
创建一个新类。选择场地
，并给出所需的颜色。然后对所有元素使用“单击事件”将类添加到标签，并选中相应的复选框
<style type="text/css">
    .radio_toggle {
      float:left;
    }

    .radio_toggle label {
      float:left;
      width:100px;
      overflow:auto;

    }

    .radio_toggle label span {
      text-align:center;
      font-size: 15px;
      padding:5px 0px;
      display:block;

    }

    .radio_toggle label input {
      position:absolute;
    }

    .radio_toggle .venue {
      background-color:#edf1f2;
      color: #58666e;
      /*min-height: 100% !important;*/
      border: thin #ced9db solid;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      cursor: pointer;
    }

    .radio_toggle .venue_selected{
        background: #f9d342  !important;
        color: #ffffff !important;
    }

    .categories input[type="checkbox"] {
      display: none;
    }
</style>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<script type="text/javascript">
    var elms = document.querySelectorAll("label.venue");
    elms.forEach(function(el,i) {
        el.onclick = function() {
            console.log(el);
            el.classList.toggle("venue_selected");
            el.querySelector("input[type='checkbox']").click();     
        }       
    });
</script>


.收音机开关{
浮动：左；
}
.收音机开关标签{
浮动：左；
宽度：100px；
溢出：自动；
}
.radio_切换标签范围{
文本对齐：居中；
字体大小：15px；
填充：5px0px；
显示：块；
}
.radio_切换标签输入{
位置：绝对位置；
}
.无线电开关.地点{
背景色：#edf1f2；
颜色：#58666e；
/*最小高度：100%！重要*/
边框：薄#ced9db实心；
边框左上半径：3px；
边框左下半径：3px；
光标：指针；
}
.收音机切换。已选择地点{
背景：#f9d342！重要；
颜色：#ffffff！重要；
}
.categories输入[type=“checkbox”]{
显示：无；
}
类别
类别
类别
var elms=document.queryselectoral（“label.vention”）；
elms.forEach（函数（el，i）{
el.onclick=函数（）{
控制台日志（el）；
el.classList.toggle（“所选地点”）；
el.querySelector（“输入[type='checkbox']”）。单击（）；
}       
});
正如@UnknownDeveloper所指出的，您必须使用javascript来实现这一点。
创建一个新类。选择场地
，并给出所需的颜色。然后对所有元素使用“单击事件”将类添加到标签，并选中相应的复选框
<style type="text/css">
    .radio_toggle {
      float:left;
    }

    .radio_toggle label {
      float:left;
      width:100px;
      overflow:auto;

    }

    .radio_toggle label span {
      text-align:center;
      font-size: 15px;
      padding:5px 0px;
      display:block;

    }

    .radio_toggle label input {
      position:absolute;
    }

    .radio_toggle .venue {
      background-color:#edf1f2;
      color: #58666e;
      /*min-height: 100% !important;*/
      border: thin #ced9db solid;
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      cursor: pointer;
    }

    .radio_toggle .venue_selected{
        background: #f9d342  !important;
        color: #ffffff !important;
    }

    .categories input[type="checkbox"] {
      display: none;
    }
</style>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<div class="categories">
    <div class="radio_toggle">
        <label class="venue" style=""><input type="checkbox" name="toggle"><span>Category</span></label>
    </div>
</div>

<script type="text/javascript">
    var elms = document.querySelectorAll("label.venue");
    elms.forEach(function(el,i) {
        el.onclick = function() {
            console.log(el);
            el.classList.toggle("venue_selected");
            el.querySelector("input[type='checkbox']").click();     
        }       
    });
</script>


.收音机开关{
浮动：左；
}
.收音机开关标签{
浮动：左；
宽度：100px；
溢出：自动；
}
.radio_切换标签范围{
文本对齐：居中；
字体大小：15px；
填充：5px0px；
显示：块；
}
.radio_切换标签输入{
位置：绝对位置；
}
.无线电开关.地点{
背景色：#edf1f2；
颜色：#58666e；
/*最小高度：100%！重要*/
边框：薄#ced9db实心；
边框左上半径：3px；
边框左下半径：3px；
光标：指针；
}
.收音机切换。已选择地点{
背景：#f9d342！重要；
颜色：#ffffff！重要；
}
.categories输入[type=“checkbox”]{
显示：无；
}
类别
类别
类别
var elms=document.queryselectoral（“label.vention”）；
elms.forEach（函数（el，i）{
el.onclick=fu