css修改原生radio樣式

時間 2019-11-22

標籤 css 修改原生 radio 樣式欄目 CSS 简体版

原文原文鏈接

平常工做中常常會用到單選框radio，而原生樣式很差看沒法知足項目要求，模擬寫一個又比較麻煩，因此寫了一個改變原生樣式的demo。css

原生樣式：html

改變後的樣式：spa

如下爲demo代碼：htm

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .input_radio li {
            display: inline-block;
            position: relative;
            list-style: none;
        }
        .input_radio input[type="radio"] {
            display: none;
        }
        .input_radio span {
            padding: 0 12px;
            display: inline-block;
            background: #F4F4F4;
            border: 1px solid #F4F4F4;
            border-radius: 4px;
            line-height: 28px;
            text-align: center;
            color: #2D333B;
            cursor: pointer;
        }
        .input_radio input:checked+span {
            background: rgba(93,142,216,0.16);
            border-color: #5D8ED8;
            color: #5D8ED8;
        }
    </style>
</head>
<body>
    <ul class="input_radio">
        <li>  
            <label for="optionLable00">  
                <input id="optionLable00" name="option0" type="radio" checked="checked">  
                <span class="option-label">橙色</span>
            </label>
        </li>
        <li>  
            <label for="optionLable01">  
                <input id="optionLable01" name="option0" type="radio">  
                <span class="option-label">紅色</span>
            </label>
        </li>
    </ul>
</body>
</html>