html – 如何更改收音机和复选框输入的样式

发布时间：2020-12-14 19:41:35 所属栏目：资源来源：网络整理

导读：参见英文答案 Styling input radio with css 5个我有一个网站,我正在尝试更改单选按钮点的背景颜色.现在它似乎是透明的,所以它获得了背景的颜色.我尝试使用CSS并设置“background：white;”例如,这对浏览器没有影响.有任何想法用于实现这一点的酷炫技巧吗？

参见英文答案 > Styling input radio with css 5个
我有一个网站,我正在尝试更改单选按钮点的背景颜色.现在它似乎是透明的,所以它获得了背景的颜色.我尝试使用CSS并设置“background：white;”例如,这对浏览器没有影响.有任何想法用于实现这一点的酷炫技巧吗？

同样的问题代表复选框.

解决方法

jsBin demo

此技术使用绑定到隐藏输入元素的label元素,接收：checked状态将更改：before伪元素的外观：

/* 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!