Question

 <label> <input class="box" type="checkbox" name="question_19_468" value="1"> Правда   <label>                                         </label>

Есть вот такой чекбокс

Хочу вместо стандартного круга сделать квадратик похож на тот что есть в статье

https://webformyself.com/sozdanie-dostupnyx-chekboksov-i-radioknopok-na-chistom-css/

В начале удаляю стандартный

 label input[type="checkbox"] {  opacity: 0 !important; } 

Дальше сталю квадратик 

 .box label::before{     content: "" !important;     display: inline-block !important;          height: 16px !important;     width: 16px !important;          border: 1px solid !important;    }

и он ставиться как-то не там далековато, не в том месте что нужно

Ну ниче пробую поставить галочку

 input [type="checkbox"]::after{     content: ""; 	display: inline-block;  height: 6px;  width: 9px;  border-left: 2px solid;  border-bottom: 2px solid;    transform: rotate(-45deg);   }

А её уже и совсем нет

Помоему я напутал с класами и before и after прелепил не туда. Помогите пожалуйста найти выход с ситуации

Answer 1

На какой странице у вас на сайте можно увидеть результаты ваших экспериментов? Нужно видеть реальный пример и после уже будем смотреть проблему и возможные варианты ее решения.

Comments

http://presentation.co.ua/load/istorija/ukrajini_u_drugij_svitovij_vijni_prezentacija/6-1-0-446

или на любой другой

---

ARNI,

Стили с примера не идеальные и это лишь часть. Не советую их использовать так как они даже не дописаны как положено.

---

Yuri_Geruk,

Можно и другое, главное сделать нормальный чекбокс, а не этот устареллый

 

Стили я напишу. Какой клас  отвечает за сам чекбокс. Пишу 

 input [type="checkbox"]::after

Но реакции нет

---

ARNI,

более правильно так:

input[type="checkbox"]:after

галочки и не будет видно так как у вас скрыто поле стилями:

label input[type="checkbox"] { opacity: 0 !important; }