Css ile Özel Checkbox ve Radio Buttons Yapımı

custom checkbox and radio buttons css only

12 Haziran 2015

minimalcoding

2604 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.

Download

Html Kod Yapısı




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

<h1>Custom Checkbox and Radio Buttons (Css Only) </h1>

<label for="safari" class="css-label">Safari</label>

<br/>

<label for="chrome" class="css-label">Chrome</label>

<br/>

<label for="firefox" class="css-label">Firefox</label>

<br/>

</div>

<label for="c_facebook" class="css-label">Facebook</label>

<br/>

<label for="c_twitter" class="css-label">Twitter</label>

<br/>

<label for="c_g" class="css-label">Google+</label>

</div>

</form>

Sass Yapısı




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

@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ı




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

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

}

Css ile Özel Checkbox ve Radio Buttons Yapımı

Örnek Uygulama

Html Kod Yapısı

Sass Yapısı

Css Yapısı

Yorum yap