HTML флажок без метки не отображается

Question

Я пытаюсь создать флажок без тега метки с CSS.

input[type='checkbox']:after{
    line-height: 1.5em;
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top: -4px;
    margin-left: -4px;
    border: 1px solid rgb(192,192,192);
    border-radius: 0.25em;
    background: #fff;
}

input[type='checkbox']:checked:after {
width: 15px;
    height: 15px;
    border: 2px solid black;
}

Галочка не появляется после установки флажка. Что здесь пропало? Fiddle

Answer 1

Для проверки внутри флажка вы можете поставить content: '✔'; внутри input[type='checkbox']:checked:after

Вот простое решение

input[type='checkbox']:after {
    line-height: 1.5em;
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid rgb(192,192,192);
    border-radius: 0.25em;
    background: #fff;
    margin-top: -4px;
    margin-left: -4px;
}

input[type='checkbox']:checked:after {
    content: '✔';
    text-align: center;
    width: 15px;
    height: 15px;
    border: 2px solid black;
}

<input type="checkbox"/>

здесь мой jsfiddle вы можете оформить заказ Здесь

---

Другой путь

для этого вам нужно добавить Fontawesome CDN, чтобы использовать значок в вашем проекте

https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

, после этого просто добавьте в свой css значение input[type='checkbox']:checked:after{}

input[type='checkbox']:checked:after {
    /* content: '✔'; */
    content: '\f00c';
    text-align: center;
    width: 15px;
    height: 15px;
    border: 2px solid black;
   font-family: 'FontAwesome';   
}

, также вы можете найти здесь fontawesome Шпаргалка для кода

input[type='checkbox']:after {
    line-height: 1.5em;
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid rgb(192,192,192);
    border-radius: 0.25em;
    background: #fff;
    margin-top: -4px;
    margin-left: -4px;
}

input[type='checkbox']:checked:after {
    /* content: '✔'; */
    content: '\f00c';
    text-align: center;
    width: 15px;
    height: 15px;
    border: 2px solid black;
   font-family: 'FontAwesome';   
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="checkbox"/>

контрольная касса Здесь

Answer 2

Попробуйте этот код с html сущностью для символа галочки

input[type='checkbox']:checked:after {
width: 15px;
    height: 15px;
    border: 2px solid black;
    content: '\2713';
    font-size: 22px;
    line-height: 15px;
}