Флажки или галочки checkbox и radio

Флажки или галочки checkbox и radio


Стильное оформление html форм чекбоксов и радио с применение jQuery. В данном скрипте происходит скрытие стандартных форм и постановка на их место своих картинок с применением jQuery. Не Везде checkbox и radio хорошо смотрятся и если вас неудовлетворяют или не подходят к дизайну интерфейса обычные формы, то прошу качать этот плагин.

Код очень легкий и к тому же вы всегда можете поменять дизайн флажков, так как это просто навсего картинки. На место них можете крепить, что угодно.

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;
}

И подключаем js, который есть в архиве. Приятного использования.

Добавить комментарий

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

Комментариев 0

Новые обсуждения на Форуме