» » Красиві прапорці або галочки checkbox або radiobutton для вашого сайту

Красиві прапорці або галочки checkbox або radiobutton для вашого сайту

Стильне оформлення html форм чекбоксів і радіо з застосування jQuery. У даному скрипті відбувається приховування стандартних форм і постановка на їх місце своїх картинок із застосуванням jQuery. Чи не Скрізь checkbox і radio добре виглядають і якщо вас не задовольняють або не підходять до дизайну інтерфейсу звичайні форми, то прошу качати цей плагін.
Красиві прапорці або галочки checkbox або radiobutton для вашого сайту


Код дуже легкий і до того ж ви завжди можете поміняти дизайн прапорців, так як це просто навсього картинки. На місце них можете кріпити, що завгодно. Html код:
<div>
<input checked="checked" id="CheckBox1" class="CheckBoxClass" type="checkbox">
<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass LabelSelected">Checkbox 1</label>
<input checked="checked" id="CheckBox2" class="CheckBoxClass" type="checkbox"> <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass LabelSelected">Checkbox 2</label>
</div>
<div>
<input checked="checked" id="Radio1" class="RadioClass" name="group1" type="radio">
<label id="Label1" for="Radio1" class="RadioLabelClass RadioSelected">Radio 1</label>
<input id="Radio2" class="RadioClass" name="group1" type="radio">
<label id="Label2" for="Radio2" class="RadioLabelClass">Radio 2</label>
<input id="Radio3" class="RadioClass" name="group1" type="radio">
<label id="Label3" for="Radio3" class="RadioLabelClass">Radio 3</label>
</div>


CSS:
.CheckBoxClass,.RadioClass{ display: none; }
.CheckBoxLabelClass{ background: url("UnCheck.png") no-repeat; padding-left: 30px; padding-top: 3px; margin: 5px; height: 28px; width: 150px; display: block; }
.CheckBoxLabelClass:hover,
.RadioLabelClass:hover{ text-decoration: underline; }
.LabelSelected{ background: url("Check.png") no-repeat; }
.RadioLabelClass{ background: url("UnCheck.png") no-repeat; padding-left: 30px; padding-top: 3px; margin: 5px; height: 28px; width: 70px; display: block; float: left; }
.RadioSelected{ background: url("Check.png") no-repeat; }




Завантажити безкоштовно


scripts
684 06.02.15



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру