Оформление и стилизация option select, radio buttons, input checkbox CSS3

<ul class="item">
<li>
  <h1>checkbox</h1>
  <label class="control checkbox_st">Первый чекбокс
    <input type="checkbox" checked="checked">
    <div class="gird_input"></div>
  </label>
  <label class="control checkbox_st">Второй чекбокс
    <input type="checkbox">
    <div class="gird_input"></div>
  </label>
  <label class="control checkbox_st">Пассивный
    <input type="checkbox" disabled="disabled">
    <div class="gird_input"></div>
  </label>
  <label class="control checkbox_st">Selected
    <input type="checkbox" disabled="disabled" checked="checked">
    <div class="gird_input"></div>
  </label>
</li>

<li>
  <h1>Radio buttons</h1>
  <label class="control radio_st">Радио кнопка
    <input type="radio" name="radio" checked="checked">
    <div class="gird_input"></div>
  </label>
  <label class="control radio_st">Радио кнопка
    <input type="radio" name="radio">
    <div class="gird_input"></div>
  </label>
  <label class="control radio_st">Disabled
    <input type="radio" name="radio2" disabled="disabled">
    <div class="gird_input"></div>
  </label>
  <label class="control radio_st">Selected
    <input type="radio" name="radio2" disabled="disabled" checked="checked">
    <div class="gird_input"></div>
  </label>
</li>

<li>
  <h1>Select</h1>
  <div class="select">
    <select>
    <option>Option</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <div class="select__arrow"></div>
  </div>

  <div class="select">
    <select>
    <option>Second select</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <div class="select__arrow"></div>
  </div>

  <div class="select">
    <select disabled="disabled">
    <option>Disabled</option>
    <option>Option</option>
    <option>Option</option>
    </select>
    <div class="select__arrow"></div>
  </div>
</li>
</ul>

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

html, body {
 margin: 20px 0;
}

body {
 background : #eee;
 font-family: 'Roboto', sans-serif;
 font-size: 16px;
 color: #4f4f5a;
 padding: 0;
}

.item {
 list-style: none;
 margin: 0;
 padding: 0;
 margin: 0 auto;
 display: table;
}

.item li {
 width: 220px;
 height: 270px;
 padding: 20px;
 margin: 10px;
 display: inline-block;
 vertical-align: top;
 background: #fff;
 text-align: left;
 box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

@media (max-width:468px) {
 .item li {
  width: calc(100% - 60px);
 }
}

.item li .control {
 display: block;
 position: relative;
 padding-left: 30px;
 margin-bottom: 15px;
 cursor: pointer;
}

.item li .control input {
 position: absolute;
 z-index: -1;
 opacity: 0;
}

.item li .gird_input {
 position: absolute;
 top: 0px;
 left: 0;
 height: 16px;
 width: 16px;
 background: #fff;
 border: 1px solid #eee;
}

.item li .checkbox_st .gird_input {
 border-radius: 3px;
}

.item li .checkbox_st .gird_input:after {
 left: 5px;
 top: 0px;
 width: 5px;
 height: 12px;
 border: solid #34bb92;
 border-width: 0 2px 2px 0;
 transform: rotate(45deg);
}

.item li .checkbox_st input:disabled ~ .gird_input:after {
 border-color: #7b7b7b;
}

.item li .radio_st .gird_input {
 border-radius: 50%;
}

.item li .control:hover input:not([disabled]) ~ .gird_input,
.item li .control input:focus ~ .gird_input {
 border-color: #34bb92;
}

.item li .control input:checked ~ .gird_input {
 background: #fff;
}

.item li .control input:disabled ~ .gird_input {
 background: #e6e6e6;
 opacity: 0.6;
 pointer-events: none;
}

.gird_input:after {
 content: '';
 position: absolute;
 display: none;
}

.control input:checked ~ .gird_input:after {
 display: block;
}

.item li .radio_st .gird_input:after {
 left: 5px;
 top: 5px;
 height: 6px;
 width: 6px;
 border-radius: 50%;
 background: #34bb92;
}
.item li .radio_st input:disabled ~ .gird_input:after {
 background: #7b7b7b;
}

.item li .select {
 position: relative;
 width: 100%;
 display: inline-block;
 margin-bottom: 15px;
}

.item li .select select {
 width: 100%;
 display: inline-block;
 cursor: pointer;
 padding: 10px 15px;
 outline: 0;
 border: 0;
 border-radius: 0;
 background: #e6e6e6;
 color: #7b7b7b;
 appearance: none;
 -webkit-appearance: none;
 -moz-appearance: none;
}
.item li .select select::-ms-expand {
 display: none;
}
.item li .select select:hover,
.item li .select select:focus {
 color: #000;
 background: #ccc;
}
.item li .select select:disabled {
 opacity: 0.5;
 pointer-events: none;
}
.item li .select__arrow {
 position: absolute;
 top: 16px;
 right: 15px;
 width: 0;
 height: 0;
 pointer-events: none;
 border-style: solid;
 border-width: 8px 5px 0 5px;
 border-color: #7b7b7b transparent transparent transparent;
}
.item li .select select:hover ~ .select__arrow,
.item li .select select:focus ~ .select__arrow {
 border-top-color: #000;
}
.item li .select select:disabled ~ .select__arrow {
 border-top-color: #ccc;
}

Отправить