css tog 单选框

CSS Tog 单选框的使用教程

CSS Tog 单选框是一种非常方便的样式，它可以让你快速的生成带有切换效果的单选框，非常适合用在网站表单中。

使用 CSS Tog 单选框非常简单，只需要使用一点点 CSS 代码就可以实现。

/* CSS Tog 单选框样式 */input[type="radio"] {
    display: none;
}
label {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid #CCC;
    cursor: pointer;
}
input[type="radio"]:checked + label {
    background-color: #0072c6;
    color: #FFF;
}
    

上面的代码中，首先使用 display: none; 隐藏了所有单选框。

然后，使用 label 标签来替代单选框，在 label 标签中包裹一个 input 标签，通过 input[type="radio"]:checked + label 这个选择器实现切换效果的样式。

你只需要把 label 标签插入到你的网页表单中，然后就可以使用 CSS Tog 单选框了。

举个例子：

选项 1选项 2选项 3

通过这个简单的例子，你可以非常容易的实现一个 CSS Tog 单选框，并将它应用到你的网站表单中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！