CSS radio

CSS radio

单选按钮是HTML元素,可帮助从用户那里获取输入。尽管很难设置单选按钮的样式,但伪元素使设置单选按钮的样式更加容易。如果需要从一组项目中进行单个选择,则应用单选按钮。
此 HTML元素通常在每个网站上都使用,但是在不设置样式的情况下,它们在每个网站上看起来都相似。因此,对它们进行样式设计会使我们的网站与众不同且更具吸引力。使用 CSS设计单选按钮是一项有趣且富有创意的任务,它将为默认单选按钮提供新外观。
要创建自定义单选按钮,我们需要编写一个HTML标记,并且要编写样式,我们必须编写CSS。
通过使用一些方法,可以清除单选按钮的样式插图。让我们来看一些相同的插图。

示例

在此示例中,我们使用的是"
"同级组合器。它选择前一个选择器之后的所有元素。当用户将光标移到单选按钮上时,我们还使用伪类
:hover 设置样式。
 <!DOCTYPE html>
<html>
<style>
    .container {
        display: block;
        position: relative;
        padding-left: 40px;
        margin-bottom: 20px;
        cursor: pointer;
        font-size: 25px;
    }
    /* 隐藏默认单选按钮 */
    .container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }
    /* 自定义单选按钮 */
    .check {
        position: absolute;
        top: 0;
        left: 0;
        height: 30px;
        width: 30px;
        background-color: lightgray;
        border-radius: 50%;
    }
    .container:hover input ~ .check {
        background-color: gray;
    }
    .container input:checked ~ .check {
        background-color: blue;
    }
    .check:after {
        content: "";
        position: absolute;
        display: none;
    }
    .container input:checked ~ .check:after {
        display: block;
    }
    .container .check:after {
        top: 8px;
        left: 8px;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: white;
    }
</style>
<body>
    <h1> 自定义单选按钮的示例 </h1>
    <h2> 选择类别 </h2>
    <label class="container">GEN
        <input type="radio" name="radio" checked>
        <span class="check"></span>
    </label>
    <label class="container">OBC
        <input type="radio" name="radio">
        <span class="check"></span>
    </label>
    <label class="container">SC
        <input type="radio" name="radio">
        <span class="check"></span>
    </label>
    <label class="container">ST
        <input type="radio" name="radio">
        <span class="check"></span>
    </label>
</body>
</html>
输出

CSS radio_https://bianchenghao6.com_【CSS 教程】_第1张

为了更清楚地理解它,我们将看到另一个显示单选按钮样式的示例。使用CSS设置单选按钮的样式可以使网站看起来更加专业。

Example2

 <!DOCTYPE html>
<html>
<head>
    <style>
        .container{
    float: left;
    margin: 10px;
}
.right{
    float: left;
    margin: 10px;
color: blue;
font-size: 20px;
    font-weight:bold;
}
.radio {
    width: 20px;
    position: relative;
}
.radio label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px white, 3px 3px 9px rgba(0,0,0,0.5);
    border: 1px solid black;
}
.radio label:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    border: 6px solid blue;
    border-radius: 50px;
    opacity: 0;
    }
.radio label:hover::after {
    opacity: 0.3;
    }
.radio input[type=radio] {
    visibility: hidden;
}
.radio input[type=radio]:checked + label:after {
     opacity: 1;
    }
        </style>
</head>
<body>
    <h1> CSS单选按钮示例 </h1>
    <h2> 单击以下单选按钮以查看效果 </h2>
    <div class="container">
        <div class="radio">
            <input type="radio" value="Male" name='gender' id='male' />
            <label for="male"></label>
        </div>
    </div>
    <div class="right">Male</div>
    <div class="container">
        <div class="radio">
            <input type="radio" value="Female" name='gender' id='female' />
            <label for="female"></label>
        </div>
    </div>
    <div class="right">Female</div>
    </center>
</body>
</html>
输出

CSS radio_https://bianchenghao6.com_【CSS 教程】_第2张