CSS單選框的使用與優化

一、CSS單選框標籤

單選框在HTML中是通過input標籤來實現的，type屬性值為radio。

    <input type="radio" name="gender" value="male"> Male

    <input type="radio" name="gender" value="female"> Female

其中，name屬性值相同的單選框會被視為一組，value屬性值對應的是被選中時提交的數據。

二、CSS單選框外觀

1. CSS單選框方框

單選框默認外觀為圓形，但可以通過CSS將其改為方框：

    input[type="radio"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border: 1px solid #ccc;
        border-radius: 0;
    }

2. CSS單選框顏色

單選框的顏色可以通過設置背景色和選中時的偽類（:checked）來實現：

    input[type="radio"] {
        background-color: #f0f0f0;
    }
    input[type="radio"]:checked {
        background-color: #00cc99;
    }

3. CSS單選框打鉤

單選框默認為實心圓，可以使用偽類（:before）將其改為打鉤：

    input[type="radio"]:checked:before {
        content: '\2713';
        text-align: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #00cc99;
        color: #fff;
    }

三、CSS單選框優化

1. CSS單選框縱着排列

默認情況下，單選框是橫向排列的，可以通過設置display屬性來控制：

    input[type="radio"] {
        display: block;
        margin-bottom: 10px;
    }

2. CSS單選框變成方框

在改為方框時，由於原來的圓形和打鉤都會被保留下來，可以通過設置一個額外的div來解決這個問題：

    <div class="radio-item">
        <input type="radio" name="gender" value="male"> Male
    </div>
    <div class="radio-item">
        <input type="radio" name="gender" value="female"> Female
    </div>
    .radio-item {
        display: inline-block;
        margin-right: 10px;
        position: relative;
    }
    .radio-item input[type="radio"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid #ccc;
        border-radius: 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    .radio-item input[type="radio"]:checked:before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #00cc99;
        position: absolute;
        top: 5px;
        left: 5px;
    }

3. CSS單選框為矩形

如果需要將單選框變成矩形，則需要調整寬度和高度，同時調整圓角：

    input[type="radio"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 20px;
        height: 12px;
        border: 1px solid #ccc;
        border-radius: 6px;
    }
    input[type="radio"]:checked:before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #00cc99;
        border-radius: 50%;
        position: absolute;
        top: 1px;
        left: 5px;
    }