Html 更改复选框和单选按钮的边框颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17993954/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 11:45:33  来源:igfitidea点击:

Change the border color of the checkbox and radio button

htmlcss

提问by Naju

How to change the border color of the checkbox and radio button (circle and rectangle color) using CSS?

如何使用 CSS 更改复选框和单选按钮的边框颜色(圆形和矩形颜色)?

I tried lot but not getting a correct one.

我尝试了很多,但没有得到正确的。

Please advice me?

请给我建议?

回答by eevaa

It simply is not possible. However, there is a workaround where the actual checkbox is made invisible and the styled label is used as an overlay. Looks good and works fine.

这是不可能的。但是,有一种变通方法是使实际复选框不可见,并将样式标签用作叠加层。看起来不错,工作正常。

More about it here: http://css-tricks.com/the-checkbox-hack/

更多关于它的信息:http: //css-tricks.com/the-checkbox-hack/

回答by Anton

Wrap the checkbox with a div and then put a border around it or create a tableand put border around the td

用 div 包裹复选框,然后在它周围放置一个边框或创建一个table并在其周围放置边框td

div{
   border: 1px solid red
}

or

或者

td{
   border: 1px solid red
}


<div>
   <input type="checkbox"/>
</div>

回答by Ankit Jain

You can make a custom radio button. You can use js to show or hide a image. Image will be looks like as designed check box and original checkbox should be hide. Change the value of checkbox on image click.

您可以制作自定义单选按钮。您可以使用 js 来显示或隐藏图像。图像看起来像设计的复选框,原始复选框应该隐藏。单击图像时更改复选框的值。