Стилизация чекбоксов [Помощь]

[xsacha]

Была давно идея стилизовать чекбоксы, вот получилось сделать, но что то не получается скрыть родные, чтобы остались новые. Да и почему то отображается только в хроме. Вот фрагмент кода может кто подскажет, родные я пока отодвинул в сторону, чтобы смотреть работает задумка или нет. Возможно кому то будет не безразлична идея.

input[type="checkbox"]:not(checked):before {
    content: '';
    position: absolute;
    left: 0;
    width: 31px;
    height: 15px;
    border-radius: 13px;
    background: #CDD1DA;
    cursor: pointer;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
}
input[type="checkbox"]:not(checked):after {
    content: '';
    position: absolute;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 10px;
    background: #FFF;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
    transition: all .2s;
}
input[type="checkbox"]:checked:before {
    background: rgb(165,202,228);
}
input[type="checkbox"]:checked:after {
    left: 15px;
}
input[type="checkbox"]:focus:before {
    box-shadow: 0 0 0 3px rgba(255,255,0,.5);
}
.xenForm .ctrlUnit > dd {
    position: relative;
}
.ctrlUnit > dd > * > li {
    padding-left: 35px;
}

 

[dems_dd]

У меня есть вот такой кусочек кода найденный в просторах интернета. Все ни как не доходят руки его реализовать в рамках ксенфоро. Может у Вас что-то получиться из этого сделать

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f204"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before { content: "\f205"; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 7px; } /* allow space for check mark */

 

[xsacha]

input[type=checkbox] { display:none; }
input[type=checkbox]:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox]:before { content: "\f204"; }
input[type=checkbox]:before { letter-spacing: 10px; }
input[type=checkbox]:checked:before { content: "\f205"; }
input[type=checkbox]:checked:before { letter-spacing: 7px; }

Но тот же вопрос как скрыть старые чекбоксы

 

[Skaiman]

Была давно идея стилизовать чекбоксы, вот получилось сделать, но что то не получается скрыть родные, чтобы остались новые.

Ну по логике кода, ты добавил псевдоэлементы before и after, а скрыть ни где нет стандартные.

Во втором варианте

input[type=checkbox] { display:none; }

Значит инспектируй, смотри какие классы еще есть для них

добавь приоритет !important, я так скрывал в плагине оповещения для чата