Как поставить checkbox рядом с текстом input?

Question

[Arseniy Vikentiev]

Я хочу сделать так чтоб checkbox был слева от текста input когда я пытаюсь это сделать то у меня checkbox выше самого текста, как это исправить?
Я пытался применить align-self: flex-start; но не роботает!

<form class="forms" action="#">
        <input class="name" type="text" name="name" placeholder="Имя*" required >
        
         <input class="number" type="phone" name="tel" placeholder="Телефон*" required >
         
         <input class="mail" type="email" name="e_mail" placeholder="E-mail*" required >
         
         <input class="request" type="text" name="request" placeholder="Просьба и условия" required >
         <input id="formAgreement" checked type="checkbox" name="agreement" class="checkbox_input" required >
       <label for="formAgreement" class="form_label"><span>Я принимаю условия конфиденциальности</span></label>

.form_label span {
    font-size: 15px;
  }
  .checkbox_input {
  }

  [type="checkbox"]:not(:checked),
  [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
  }
  [type="checkbox"]:not(:checked) + label,
  [type="checkbox"]:checked + label {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
  }

  /* checkbox aspect */
  [type="checkbox"]:not(:checked) + label:before,
  [type="checkbox"]:checked + label:before {
    content: '';
    position: absolute;
    left:0; top: 2px;
    width: 16px; height: 16px;
    border: 1px solid #aaa;
    border-radius: 3px;
  }
  /* checked mark aspect */
  [type="checkbox"]:not(:checked) + label:after,
  [type="checkbox"]:checked + label:after {
    content: '✔';
    position: absolute;
    top: 3px; left: 4px;
    font-size: 18px;
    line-height: 0.8;
    color: #989898;
    transition: all .2s;
  }
  [type="checkbox"]:not(:checked) + label:after {
    opacity: 0;

  }

Comments

[Ankhena]

Я пытался применить align-self: flex-start; но не роботает!

Конечно, не работает.
Где родительский флекс-то?

И заодно:
1. Зачем два псевдоэлемента, чтобы поставить одну галочку в рамочку?
2. Зачем попадать куда-то абсолютом (вы еще и два раза это делаете), помнить о том, какой ширины псевдо и делать аналогичный отступ, если есть гриды?
3. Чисто за компанию https://web-standards.ru/articles/vertical-align/

Answer 1

[Elena Fire]

Во-первых, никакой flex не работает на элементах с position: absolute - с точки зрения остальных объектов на странице таких элементов не существует, они исключаются из сетки.
Во-вторых, чтобы ваш checkbox находился слева от текста - заметьте, от текста label, а не input[type=checkbox]! - их нужно обернуть в единый блок. Тогда не придется загоняться на position: absolute, он и так встанет слева, если у этого единого блока будет свойство display: flex, или display:block, а у input будет float: left.
В-третьих, зачем создавать два псевдоэлемента before и after, да к тому же с одинаковыми значениями при отмеченном checkbox и неотмеченном??? Да еще и вешать opacity??? Прямо скажем, криво.
А теперь немного кода:

<div class="my-checkbox">
   <input id="formAgreement" checked type="checkbox" name="agreement" class="checkbox_input" required >
   <div class="checked"></div> <!-- место для чекбокса-->
    <div> <!-- еще один контейнер, чтобы можно было выровнять по центру --->
            <label for="formAgreement" class="form_label">
                 <span>Я принимаю условия конфиденциальности</span>
             </label>
    </div>
</div>

И css:

.form_label span {
    font-size: 15px;
    position: relative; /*придаем блоку свойство для создания возможности позиционирования в блоке*/
  }
  .checkbox_input {
      position: absolute;
      left: -999999px;   /*прячем чекбокс за пределы видимости*/
  }


  label {
     text-decoration: underline;
     color: red;
     cursor: pointer; /*чтобы все поняли, что сюда нужно нажимать*/
  }

  .checked { /*квадратик для галочки*/
    width: 16px;
    height: 16px;
    border: 1px solid #aaa;
    border-radius: 3px;
  }
 
  [type="checkbox"]:checked .checked {  /*появление галочки при нажатии на label*/
    content: '✔';
   display: block;
    font-size: 18px;
    line-height: 0.8;
    color: #989898;
    transition: all .2s;
  }

/* и собственно выравнивание */
.my-checkbox {
   display: flex;
   align-items: center;
}