Edit in JSFiddle

/*

NO JAVASCRIPT MATERIAL TEXTFIELD.

*/

<form>

<label class="material-textfield">
  <input class="material-textfield--input" placeholder=" ">
  <span class="material-textfield--label">Navn</span>
  <hr class="material-textfield--border">
</label>

<label class="material-checkbox">
  <input class="material-checkbox-input" type="checkbox">
  <span class="material-checkbox-label">Ønsker nyhetsbrev</span>
  <div class="material-checkbox-box"></div>
</label>

</form>

$primary-color: #236dd1;
$primary-shadow: #9fc1ec;


.material-textfield {
  box-sizing: border-box;
  padding: 30px 0px;
  display: block;
  position: relative;
  width: 200px;
}

.material-textfield--input {
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.38);
  outline: none;
  font-size: 14px;
}

.material-textfield--label {
  box-sizing: border-box;
  position: absolute;
  left:0;
  font-size: 12px;
  transition: top 0.2s ease, font-size 0.2s ease;
  top: 15px;
}

.material-textfield--border {
  box-sizing: border-box;
  border-width: 0;
  border-top: 2px solid $primary-color;
  margin: 0;
  width: 0;
  transition: width 0.2s ease;
  margin: auto;
}

.material-textfield--input:placeholder-shown ~ .material-textfield--border {
  width: 0%;
}

.material-textfield--input:placeholder-shown ~ .material-textfield--label {
    top: 30px;
    font-size: 14px;
}

.material-textfield--input:focus ~ .material-textfield--border {
  width: 100%;
}

.material-textfield--input:focus ~ .material-textfield--label {
    top: 15px;
    font-size: 12px;
}

.material-textfield--input:focus:not(:placeholder-shown) ~ .material-textfield--label {
  color: $primary-color;
}


.material-checkbox {
  position: relative;
  display: block;
}

.material-checkbox-input {
  visibility: hidden;
}

.material-checkbox-box {
  width: 12px;
  height: 12px;
  border: 2px solid grey;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
}
.material-checkbox-input:checked ~ .material-checkbox-box {
  border-color: $primary-color;
  background-color: $primary-color;
  
  
  &:before,
  &:after {
    content: ' ';
    background-color: rgba(255, 255, 255, 0.95);
    width: 2px;
    position: absolute;
  }
  &:before {
    height: 10px;
    top: 1px;
    left: 6px;
    transform: rotate(40deg);
  }
  &:after {
    height: 5px;
    top: 5px;
    left: 2px;
    transform: rotate(-40deg);
  }
}