Установить положение специальных символов в CSS - PullRequest
Новая
       22

Установить положение специальных символов в CSS

0 голосов
/ 12 февраля 2019

У меня небольшая проблема с установкой положения моего элемента ввода.У меня есть некоторый код, и я не могу понять, почему мой элемент находится вне моего div на мой взгляд.Пожалуйста, посмотрите на это: 

https://jsfiddle.net/yzhL69fa/3/


<div class="panel panel-default">
  <div class="panel-heading">
     <h3 class="panel-title" id="panel-title"> Is Super </h3>
  </div>
     <div class="panel-body">
     <input class="star-checkbox" type="checkbox" id="isSuper" name="isSuperCheckbox">
  </div>
</div>

Когда я удаляю class="star-checkbox" из своих элементов ввода, я вижу флажок ввода в правильном месте (пользовательский флажок, но мне нужно это как звездочка).Но когда я добавляю этот класс, мой элемент выходит за пределы моего div "panel-body".

Также, когда я добавляю в свой класс: "star-checkobox" один думает: display: inline-grid; тогда мой флажок входит в мое "тело панели""но это все еще не в своем положении.Моя цель состоит в том, чтобы этот флажок был похож на звезду, но в центре моего "panel-body".Я не хочу там отступы и поля.Лучше всего было бы, если бы мой флажок выглядел как звезда и появлялся в центре моего div с автоматическим полем и автоматическим заполнением.Кто-нибудь может мне помочь с этим?

1 Ответ

0 голосов
/ 12 февраля 2019

Вы можете добавить position : relative к классу before, чтобы расположить звездный элемент. JSFiddle . 

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.star-checkbox {
    visibility:hidden;
    font-size:60px;
    cursor:pointer;
}
.star-checkbox:before {
    color:#FF912C;
    content: "\2605";
    visibility:visible;
    position:relative;
    font-size:30px;
    top:-40px;
}
.star-checkbox:checked:before {
    color:black;
    content: "\2606";
}
...