Học tập‎ > ‎html/css/php..‎ > ‎

thay đổi checkbox và radio button theo metro style bằng css


Ta sử dụng 2 hình ảnh sau để hiển thị 2 trạnh thái của 2 nút (mỗi hình có kích thước là 22 x 44px). 2 hình này được để trong thư mục image/

  
(chkbox.png)
 
(radio.png)

code CSS:

.my_style input[type="checkbox"], .my_style input[type="radio"] {
    display: none;   /*khong hien thi nut check mac dinh*/
}
.my_style input[type="checkbox"] + label{
    height: 22px;
    display: block;
    background: url("image/chkbox.png") no-repeat;
}
.my_style input[type="radio"] + label{
    height: 22px;
    display: block;
    background: url("image/radio.png") no-repeat;
}
.my_style input[type="checkbox"]:checked +label, .my_style input[type="radio"]:checked +label{
    background-position: 0 -22px;
}
.my_style label{
    line-height: 22px;
    padding-left: 25px;
}

Sử dụng trong HTML:

<ul class="my_style">
                <li>
                    <input type="radio" name="ship_opt" id="ship1" value="option1" checked="">
                    <label for="ship1">Radio button 1</label>
                </li>
                <li>
                    <input type="radio" name="ship_opt" id="ship2" value="option2" checked="">
                    <label for="ship2">Radio button 2</label>
                </li>
                <li >
                    <input type="checkbox" id="chk1">
                    <label for="chk1">Check box 1</label>
                </li>
</ul>

Kết quả:

Chúc các bạn thành công !
(c) vnaking.com - Nguyen Van Toan

Comments