<div class="container">
  <div class="block checkbox">
    <h3>Checkbox</h3>
    <input type="checkbox" id="cb1">
    <label for="cb1">Click me</label>
    <input disabled="disabled" type="checkbox" id="cb2">
    <label for="cb2">Disabled</label>
    <input disabled="disabled" checked="checked" type="checkbox" id="cb3">
    <label for="cb3">Disabled & Checked</label>
  </div>
  <div class="block radio">
    <h3>Radio Button</h3><input type="radio" name="radiogroup1" id="rd1">
    <label for="rd1">Chose me</label>
    <input type="radio" name="radiogroup1" id="rd2">
    <label for="rd2">Chose me</label>
    <input type="radio" name="radiogroup2" disabled="disabled" id="rd3">
    <label for="rd3">Disabled</label>
    <input type="radio" name="radiogroup2" disabled="disabled" checked="checked" id="rd4">
    <label for="rd4">Disabled & Checked</label>
  </div>
  <div class="block select-wrpper">
    <h3>Select</h3>
    <div class="select">
      <select>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
      <div class="select_arrow"></div>
    </div>
  </div>
</div>
html,
body {
  height: 100%;
}

body {
  background: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

h3 {
  font-size: 1.5em;
}

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.block {
  background: #fff;
  padding: 15px;
  box-sizing: border-box;
  min-width: 300px;
  max-width: 350px;
  height: 250px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 15px;
}

input[type="checkbox"],
input[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.checkbox label:before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  vertical-align: -3px;
  border: 2px solid #000;
  padding: 0.12em;
  background-color: transparent;
  background-clip: content-box;
  transition: all 0.2s ease;
}

.checkbox label {
  margin-right: 1em;
  position: relative;
}

.checkbox label:after {
  border-right: 3px solid #000000;
  border-top: 3px solid #000000;
  content: "";
  height: 20px;
  left: 2px;
  position: absolute;
  top: 8px;
  transform: scaleX(-1) rotate(135deg);
  transform-origin: left top;
  width: 7px;
  display: none;
}

.checkbox input:hover + label:before {
  border-color: #3dbfef;
}

.checkbox input:checked + label:before {
  border-color: #3dbfef;
}

.checkbox input:disabled + label {
  border-color: #d2d2d2;
  color: #d2d2d2;
}

.checkbox input:disabled + label:before {
  border-color: #d2d2d2;
}

.checkbox input:not([disabled]):checked + label:after {
  -moz-animation: check 0.8s ease 0s running;
  -webkit-animation: check 0.8s ease 0s running;
  animation: check 0.8s ease 0s running;
  display: block;
  width: 7px;
  height: 20px;
  border-color: #3dbfef;
}

.checkbox input:disabled:checked + label:after {
  border-color: #d2d2d2;
  display: block;
}

.radio label:before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: 100%;
  vertical-align: -3px;
  border: 2px solid #000;
  padding: 0.13em;
  background-color: transparent;
  background-clip: content-box;
  transition: all 0.2s ease;
}

.radio label {
  margin-right: 1em;
}

.radio input:hover + label:before {
  border-color: #3dbfef;
}

.radio input:checked + label:before {
  background-color: #3dbfef;
  border-color: #3dbfef;
}

.radio input:disabled + label {
  border-color: #d2d2d2;
  color: #d2d2d2;
}

.radio input:disabled + label:before {
  border-color: #d2d2d2;
}

.radio input:disabled:checked + label:before {
  background-color: #d2d2d2;
}

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

.select select {
  display: inline-block;
  width: 100%;
  padding: 10px 15px;
  cursor: pointer;
  color: #7b7b7b;
  border: 2px solid #000;
  border-radius: 0;
  background: #f1f1f1;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  font-size: 1em;
}

.select select::-ms-expand {
  display: none;
}

.select select:hover,
.select select:focus {
  color: #000;
  background: #e6e6e6;
  border-color: #3dbfef;
}

.select_arrow {
  position: absolute;
  top: calc(50% - 4px);
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-width: 8px 5px 0 5px;
  border-style: solid;
  border-color: #7b7b7b transparent transparent transparent;
}

.select select:hover + .select_arrow,
.select select:focus + .select_arrow {
  border-top-color: #000;
}

@-moz-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 7px;
  }
  50% {
    height: 20px;
    width: 7px;
  }
}

@-webkit-keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 7px;
  }
  50% {
    height: 20px;
    width: 7px;
  }
}

@keyframes check {
  0% {
    height: 0;
    width: 0;
  }
  25% {
    height: 0;
    width: 7px;
  }
  50% {
    height: 20px;
    width: 7px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.