<div class="personal-data__item">
  <div>
    <input class="personal-data__input" type="checkbox" id="personal-data" />
    <label for="personal-data"></label>
  </div>
  <div>
    <label class="personal-data__label" for="personal-data">Я даю согласие на <a class="personal-data__link" href="#">обработку своих персональных данных</a> в соответствии со статьей 9 Федерального закона от 27 июля 2006 г. N 152-ФЗ «О персональных данных»</label>
  </div>
</div>
.personal-data__label{
  font-size: 12px;
  line-height: 18px;
  color: #999999;
  cursor: pointer;

}

.personal-data__link{
  color:  #FF0000;
  text-decoration: underline;
}

.personal-data__input[type=checkbox] {
  display: none;
}

.personal-data__input[type=checkbox] + label::before{
  content: '';
  text-align: center;
  color: #FE0400;
  display: inline-block;
  width: 18px;
  height: 18px;
  background: #FFFFFF;
  border: 1px solid #DFDFDF;
  margin-right: 5px;
  vertical-align: top;
  cursor: pointer;
}

.personal-data__input[type=checkbox]:checked + label::before{
  border: 1px solid  #FE0400;
  content: '✓';
  background-size: auto;
  background-repeat: no-repeat;
  background-position: center center;
}

.personal-data__item {
  display: flex;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.