如何更改收音机和复选框输入的样式 [英] How to change style of radio and checkbox input

问题描述

我有一个网站，我想改变一个单选按钮的点的背景颜色。现在它似乎是透明的，所以它得到的背景的颜色。我尝试使用CSS和设置background：white;例如，但是这没有在浏览器中的效果。

同样的问题也代表复选框。

解决方案

jsBin演示

这种技术使用标签元素绑定到隐藏的元素， ：checked 状态将改变：之前伪元素的外观：

/ [type = radio]，input [type = checkbox] {/ *隐藏原始输入* / visibility：hidden; position：absolute;} input [type = radio] + label：before，input [type = checkbox] + label：before {height：12px; width：12px; margin-right：2px; content：; display：inline-block; vertical-align：baseline; border：1px solid＃777;} input [type = radio]：checked + label：before，input [type = checkbox]：checked + label：before {background：gold;} / * CUSTOM RADIO和CHECKBOX STYLES * type = radio] + label：before {border-radius：50％;} input [type = checkbox] + label：before {border-radius：2px;}

pre class =snippet-code-html lang-html prettyprint-override> < input type =radioname =rid =r1>< label for =r1 > Radio 1< / label>< input type =radioname =rid =r2>< label for =r2 checkboxname =c1id =c1>< label for =c1> Check 1< / label>< input type =checkboxname =c2id =c2> ;< label for =c2> check 2< / label>

I have a website where I'm trying to change the background color of the dot of a radio button. Right now it seems to be transparent so it gets the color of whatever the background is. I tried using CSS and setting "background: white;" for example, however this has no effect in the browser. Any ideas of cool tricks to use to achieve this?

Same question stands for checkbox as well.

解决方案

jsBin demo

This technique uses the label element bound to hidden input elements, that receiving a :checked state will change the apperance of the :before pseudo element:

/* COMMON RADIO AND CHECKBOX STYLES  */
input[type=radio],
input[type=checkbox]{
  /* Hide original inputs */
  visibility: hidden;
  position: absolute;
}
input[type=radio] + label:before,
input[type=checkbox] + label:before{
  height:12px;
  width:12px;
  margin-right: 2px;
  content: " ";
  display:inline-block;
  vertical-align: baseline;
  border:1px solid #777;
}
input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before{
  background:gold;
}

/* CUSTOM RADIO AND CHECKBOX STYLES */
input[type=radio] + label:before{
  border-radius:50%;
}
input[type=checkbox] + label:before{
  border-radius:2px;
}

<input type="radio" name="r" id="r1"><label for="r1">Radio 1</label>
<input type="radio" name="r" id="r2"><label for="r2">Radio 2</label>

<input type="checkbox" name="c1" id="c1"><label for="c1">Check 1</label>
<input type="checkbox" name="c2" id="c2"><label for="c2">check 2</label>  

这篇关于如何更改收音机和复选框输入的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！