Animated radios & checkboxes (noJS) using HTML CSS Bootstrap


ASP.NET MVC projenizde kullanmak üzere animasyonlu ve görsel bir checkbox ve radio CSS ararken, çok hoş bir kod parçası ile karşılaştım. Yazan arkadaş güzel bir şekilde bootstrap checkbox  ve radio larını adam etmiş. Üstelik JS kodu kullanmadan sadece CSS ile.. 😉 Bir incelemenizi tavsiye ederim.

Tabii ki ASP.NET HTML Helper metotlarının ürettiği checkbox ve radio da hidden bir field varlığı(oluşan html çıktılara bakabilirsiniz) bu tarz css kodlarının(hatta js kodlarının da) direkt kullanımını zorlaştırıyor. Kısacası çalışmıyor 🙂 Bende üzerinde ufak bir kaç değişiklik ile bunu ASPNET MVC HTML Helper çıktılarına uygun hale getirdim. Aşağıdaki görselde sarı şeritli kısımları CSS içindeki kodlara eklerseniz ve HTML çıktısını da onun istediği şekilde olmasını sağlarsanız, çok zevkli çalıştığını görebilirsiniz. Görsel’den sonra örnek olarak tüm kodları bulabilirsiniz.

https://bootsnipp.com/snippets/featured/animated-radios-amp-checkboxes-nojs
Aspnet mvc animated bootstrap checkbox ve radio, noJS

 

kmb-udemy-reklam

 

// Animasyonlu ve js siz şık checkboxes

@* En basit hali ile kullanımı *@
@model SampleObj
<div class="form-group">
@Html.LabelFor(model => model.IsActive, htmlAttributes: new { @class="control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
<label>
@Html.CheckboxFor(model => model.IsActive)
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</div>
</div>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!–—- Include the above in your HEAD tag ——––>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<h1>CheckboxRadio (no JS)</h1>
<hr/>
<p>This snippet allows you create nice animated checkboxes and radios without JavaScript. <br/>Just put <code><span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span></code> right after your checkbox or radio.</p>
<p>Other markup was copied from <a href="http://getbootstrap.com/css/#forms" target="_blank">Bootstrap example</a>.</p>
<h2>Checkboxes</h2>
<hr/>
<h3>Default example</h3>
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option two is checked by default
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Default example (other icon)</h3>
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option two is checked by default
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Font awesome example</h3>
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Option two is checked by default
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Font awesome example (other icon)<br/><small>Works best with square icons =)</small></h3>
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon fa fa-rocket"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-rocket"></i></span>
Option two is checked by default
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
<span class="cr"><i class="cr-icon fa fa-rocket"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Any size you want depending on label font-size</h3>
<div class="col-sm-12">
<div class="checkbox">
<label style="font-size: 2.5em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Huge
</label>
</div>
<div class="checkbox">
<label style="font-size: 2em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Big
</label>
</div>
<div class="checkbox">
<label style="font-size: 1.5em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Bigger
</label>
</div>
<div class="checkbox">
<label style="font-size: 1em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Default
</label>
</div>
<div class="checkbox">
<label style="font-size: .8em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Smaller
</label>
</div>
<div class="checkbox">
<label style="font-size: .5em">
<input type="checkbox" value="" checked>
<span class="cr"><i class="cr-icon fa fa-check"></i></span>
Small
</label>
</div>
</div>
<h2>Radio</h2>
<hr/>
<h3>Default example</h3>
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="o1" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o1" value="" checked>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
Option two is checked by default
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="o1" value="" disabled>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok-sign"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Default example (other icon)</h3>
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="o2" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o2" value="" checked>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option two is checked by default
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="o2" value="" disabled>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-arrow-right"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Font awesome example</h3>
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="o3" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o3" value="" checked>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option two is checked by default
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="o3" value="" disabled>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Font awesome example (other icon)<br/><small>Works best with square icons =)</small></h3>
<div class="col-sm-12">
<div class="radio">
<label>
<input type="radio" name="o4" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-star"></i></span>
Option one is this and that — be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="o4" value="" checked>
<span class="cr"><i class="cr-icon fa fa-star"></i></span>
Option two is checked by default
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="o4" value="" disabled>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-star"></i></span>
Option three is disabled
</label>
</div>
</div>
<h3>Any size you want depending on label font-size</h3>
<div class="col-sm-12">
<div class="radio">
<label style="font-size: 2.5em">
<input type="radio" name="o5" value="" checked>
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Huge
</label>
</div>
<div class="radio">
<label style="font-size: 2em">
<input type="radio" name="o5" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Big
</label>
</div>
<div class="radio">
<label style="font-size: 1.5em">
<input type="radio" name="o5" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Bigger
</label>
</div>
<div class="radio">
<label style="font-size: 1em">
<input type="radio" name="o5" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Default
</label>
</div>
<div class="radio">
<label style="font-size: .8em">
<input type="radio" name="o5" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Smaller
</label>
</div>
<div class="radio">
<label style="font-size: .5em">
<input type="radio" name="o5" value="">
<input type="hidden" value="">
<span class="cr"><i class="cr-icon fa fa-circle"></i></span>
Small
</label>
</div>
</div>
</div>

.checkbox label, .radio label {
padding-left: 0;
}
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 15%;
}
.radio .cr .cr-icon {
margin-left: 0.04em;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"] + input[type="hidden"] + .cr > .cr-icon,
.radio label input[type="radio"] + input[type="hidden"] + .cr > .cr-icon {
transform: scale(3) rotateZ(-20deg);
opacity: 0;
transition: all .3s ease-in;
}
.checkbox label input[type="checkbox"]:checked + input[type="hidden"] + .cr > .cr-icon,
.radio label input[type="radio"]:checked + input[type="hidden"] + .cr > .cr-icon {
transform: scale(1) rotateZ(0deg);
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled + input[type="hidden"] + .cr,
.radio label input[type="radio"]:disabled + input[type="hidden"] + .cr {
opacity: .5;
}

view raw

03. style.css

hosted with ❤ by GitHub

One thought on “Animated radios & checkboxes (noJS) using HTML CSS Bootstrap

Bir Cevap Yazın

Aşağıya bilgilerinizi girin veya oturum açmak için bir simgeye tıklayın:

WordPress.com Logosu

WordPress.com hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Google fotoğrafı

Google hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Twitter resmi

Twitter hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Facebook fotoğrafı

Facebook hesabınızı kullanarak yorum yapıyorsunuz. Çıkış  Yap /  Değiştir )

Connecting to %s