input複選框

<html>
    <head>
        <meta charset="utf-8">
        <style>
            input[type="radio"] { width: 16px;  height: 16px; opacity: 0; }
            label { position: relative; }
            label::before { position: absolute; content: ''; left: -25px; top: 2px; width: 16px; height: 16px; border-radius:2px; border: 1px solid #707070; }
            input:checked+label::before {  background-color: #fff; border: 1px solid #707070; }
            input:checked+label::after {  position: absolute; content: ""; width: 4px; height: 9px; top: 4px; left: -19px;  border: 2px solid #707070; border-top: none; border-left: none;transform: rotate(45deg);}
        </style>
    </head>
    <body>
    <form>
        <div>
            <input id="item1" type="radio" name="item" value="選項一" checked>
            <label for="item1">
                <span>選項一</span>
            </label>
            
        </div>
        <div>
            <input id="item2" type="radio" name="item" value="選項二">
            <label for="item2">
                    <span>選項二</span>
            </label>
        </div>
    </form>
    </body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章