Стилизация Slect, Checkbox и Radio buttons на CSS и jQuery
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.checkbox, .radio { width: 19px; height: 25px; padding: 0 5px 0 0; background: url(/images/checkbox.gif) no-repeat; display: block; } .radio { background: url(/images/radio.gif) no-repeat; } .select { position: absolute; width: 158px; height: 21px; padding: 0 24px 0 8px; color: #fff; font: 12px/21px arial,sans-serif; background: url(/images/select.gif) no-repeat; overflow: hidden; } |
2#: После /head на нужных страницах вставляйте:
1 |
<script type="text/javascript" src="/js/test.js"></script> |
3#: Для того, чтобы применить стилизацию для элементов, необходимо просто приписать к ним класс styled и уникальное имя:
1 2 3 4 5 6 7 8 9 10 11 |
<input type="checkbox" name="1" class="styled" /> <input type="radio" name="2" value="1" class="styled" /> <select name="3" class="styled"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> </select> |