CRIR là sự kết hợp giữa JavaScript và CSS giúp bạn có thể tạo nút checkbox và radio theo ý mình.
Thực thế, CRIR làm việc này bằng cách ẩn đi các thành phần thật của form và thay thế bằng hình ảnh (nhưng vẫn truyền các giá trị đi như bình thường).
Sử dụng như thế nào?
Đầu tiên, bạn cần thêm file crir.css và crir.js vào phần đầu của trang, bằng cách thêm đoạn code sau vào trong thẻ <head></head>
<link href="css/crir.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="js/javascript" src="crir/crir.js"></script>
<script language="JavaScript" type="js/javascript" src="crir/crir.js"></script>
Tất nhiên bạn cần thay đổi cho đúng đường dẫn đến file css và js của bạn
Sau đó bạn chỉ cần thêm class="crirHiddenJS" vào các ô checkbox hay radio mà bạn muốn thay
<input name="turtleDoves" id="checkbox1" type="checkbox" value="true" class="crirHiddenJS" />
Nếu bạn cần 1 thẻ label, khai báo như sau:
<label for="checkbox1">Turtle Doves</label>
<input name="turtleDoves" id="checkbox1" type="checkbox" value="true" class="crirHiddenJS" />
<input name="turtleDoves" id="checkbox1" type="checkbox" value="true" class="crirHiddenJS" />
Vậy là xong, bạn chỉ cần sửa class trong file css để tùy biến các nút của mình, các class bạn cần sửa là:
.checkbox_checked
.checkbox_unchecked
.radio_checked
.radio_unchecked
.checkbox_unchecked
.radio_checked
.radio_unchecked
Comments
Nam đẹp trai. Hay thật
Wow, supper nice :))