
12 Haziran 2015
minimalcoding
3212
0
Css ile Özel Checkbox ve Radio Buttons Yapımı
Bir önceki konumuzun (Css ile özel Select Box Yapımı) devamı olarak , Checkbox ve Radio buttons elementlerinide tarayıcıların yorumlamış olduğu kötü görüntüden kurtaralım istedik. Bu uygulamanın kaynak dosyasına içeriğin sonunda bulunan download linkine tıklayarak indirebilirsiniz içeriğinde SASS dosyasıda mevcuttur . Umarız yapacağınız uygulamalarda sizlere yardımcı olur.
Örnek Uygulama
See the Pen oXwVmE by MinimalCoding (@MinimalCoding) on CodePen.
Html Kod Yapısı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<h1>Custom Checkbox and Radio Buttons (Css Only) </h1> <form class="global-form"> <div class="box"> <input type="radio" name="radio" id="safari" class="css-radio" /> <label for="safari" class="css-label">Safari</label> <br/> <input type="radio" name="radio" id="chrome" class="css-radio" /> <label for="chrome" class="css-label">Chrome</label> <br/> <input type="radio" name="radio" id="firefox" class="css-radio" /> <label for="firefox" class="css-label">Firefox</label> <br/> </div> <div class="box"> <input type="checkbox" name="category" id="c_facebook" class="css-checkbox" /> <label for="c_facebook" class="css-label">Facebook</label> <br/> <input type="checkbox" name="category" id="c_twitter" class="css-checkbox" /> <label for="c_twitter" class="css-label">Twitter</label> <br/> <input type="checkbox" name="category" id="c_g" class="css-checkbox" /> <label for="c_g" class="css-label">Google+</label> </div> </form> |
Sass Yapısı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin,latin-ext); body { background: rgba(41, 47, 55, 0.75); text-align: center; padding-top: 15px; font-family: 'Inconsolata'; } .box { display: inline-block; float: left; margin-right: 30px; } h1, h3 { color: white; font-weight: 400; } form { &.global-form { display: inline-block; text-align: left; input[type=checkbox].css-checkbox, input[type=radio].css-radio { display: none; } input[type=checkbox].css-checkbox + label.css-label, input[type=radio].css-radio + label.css-label { height: 17px; display: inline-block; line-height: 17px; font-size: 17px; padding-left: 27px; letter-spacing: 1px; vertical-align: middle; margin-bottom: 10px; color: #7a828b; cursor: pointer; -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out; -o-transition: background 300ms ease-in-out, color 300ms ease-in-out; transition: background 300ms ease-in-out, color 300ms ease-in-out; } input[type=checkbox].css-checkbox + label.css-label { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/checkbox.png"); background-repeat: no-repeat; background-position: 0 0; &:hover { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/checkbox-hover.png"); background-repeat: no-repeat; } } input[type=radio].css-radio + label.css-label { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/radio.png"); background-repeat: no-repeat; background-position: 0 0; &:hover { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/radio-hover.png"); background-repeat: no-repeat; } } input[type=checkbox].css-checkbox:checked + label.css-label { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/checked.png"); background-repeat: no-repeat; color: white; } input[type=radio].css-radio:checked + label.css-label { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/radio-check.png"); background-repeat: no-repeat; color: white; } label.css-label { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } } } |
Css Yapısı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700&subset=latin,latin-ext); body { background: rgba(41, 47, 55, 0.75); text-align: center; padding-top: 15px; font-family: 'Inconsolata'; } .box { display: inline-block; float: left; margin-right: 30px; } h1, h3 { color: white; font-weight: 400; } form.global-form { display: inline-block; text-align: left; } form.global-form input[type=checkbox].css-checkbox, form.global-form input[type=radio].css-radio { display: none; } form.global-form input[type=checkbox].css-checkbox + label.css-label, form.global-form input[type=radio].css-radio + label.css-label { height: 17px; display: inline-block; line-height: 17px; font-size: 17px; padding-left: 27px; letter-spacing: 1px; vertical-align: middle; margin-bottom: 10px; color: #7a828b; cursor: pointer; -webkit-transition: background 300ms ease-in-out, color 300ms ease-in-out; -o-transition: background 300ms ease-in-out, color 300ms ease-in-out; transition: background 300ms ease-in-out, color 300ms ease-in-out; } form.global-form input[type=checkbox].css-checkbox + label.css-label { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/checkbox.png"); background-repeat: no-repeat; background-position: 0 0; } form.global-form input[type=checkbox].css-checkbox + label.css-label:hover { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/checkbox-hover.png"); background-repeat: no-repeat; } form.global-form input[type=radio].css-radio + label.css-label { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/radio.png"); background-repeat: no-repeat; background-position: 0 0; } form.global-form input[type=radio].css-radio + label.css-label:hover { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/radio-hover.png"); background-repeat: no-repeat; } form.global-form input[type=checkbox].css-checkbox:checked + label.css-label { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/checked.png"); background-repeat: no-repeat; color: white; } form.global-form input[type=radio].css-radio:checked + label.css-label { background: url("http://minimalcoding.net/wp-content/uploads/2015/06/radio-check.png"); background-repeat: no-repeat; color: white; } form.global-form label.css-label { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } |
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.