0

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    
    background: #1B2473;
    color: #787878;
    font-family: Roboto;
    font-size: 16px;
   
    }
    .wrapper {
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
    }


    .form {
    max-width: 600px;
    width: 100%;
    padding: 26px 46px 26px 45px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.25);
    }
    .form__title {
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    line-height: 100%;
    margin-bottom: 17px;
    }
    .form__group {
    
    }
    .form__input_mg-bottom-13 {
    margin-bottom: 13px;
    }
    .form__input_mg-bottom-16 {
    margin-bottom: 16px;
    }
    .form__label-input {
    font-weight: bold;
    line-height: 100%;
    
     }
    .form__input {
    max-width: 509px;
    width: 100%;
    height: 49px;
    border: 2px solid #787878;
    color: #787878;
    border-radius: 10px;
    margin-top: 3px;
    padding: 0 0 0 10px;
    font-size: 28px;
    }
    .form__input::placeholder {
    font-weight: bold;
    line-height: 129%;
    color: #cccccc;
    }

    .form__label-checkbox {
    position: relative;
    font-size: 14px;
    line-height: 114%;
    margin-bottom: 52px;
    display: inline-flex;
    align-items: center;
    align-content: center;
    }
    /* .form__checkbox {
    margin-right: 10px;
    width: 24px;
    height: 24px;
    border: 2px solid #787878;
    border-radius: 7px; 
    
    } */
    .form__checkbox {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    }
    .form__label-checkbox::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 2px solid #787878;
    border-radius: 7px; 
    position: relative;
    }
    .form__label-checkbox::after {
    content: 'V';
    
    }
     .form__label-checkbox::before:checked + .form__label-checkbox::after {
     position: absolute;
    }

    .form__btn {
    width: 180px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 67%;
    background: #1A226B;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    padding: 18px 56px 18px 55px;
    }
    .form__btn:hover {
    background: #3e4588;
    }
    .form__button-block {
    display: flex;
    justify-content: center;
    align-items: center;
    }



      /* ------------- 320 - 768------------------------- */

      @media (max-width: 768px) {

      .form {
        max-width: 728px;
        height: 100%;
        
     }
     .form__title {
        font-size: 60px;
        line-height: 83%;
        margin-bottom: 13px;
      }
     .form__group {
      }
     .form__label-input {
        font-size: 24px;
        line-height: 67%;
     }
     .form__input {
        max-width: 638px;
        margin-top: 8px;        
     }
     .form__input::placeholder {
        color: #cccccc;
     }
    
    .form__label-checkbox {
        font-size: 18px;
        line-height: 89%;
        margin-bottom: 64px;
    }
    .form__checkbox {
        width: 32px;
        height: 32px;
    }
    .form__button-block {
    }
    .form__btn {
        max-width: 220px;
        min-height: 80px;
        padding: 32px 64px;
        display: flex;
        justify-content: center;
        align-items: center;
       }
      }
    
      <!DOCTYPE html>
      <html lang="en">
      <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Roboto:regular,700&display=swap" 
       rel="stylesheet" />
       <title>Form</title>
      </head>
      <body>
      <div class="wrapper">
        <form action="#" class="form">

            <h1 class="form__title">Вход</h1>

            <div class="form__group">
                <label for="" class="form__label-input">Email</label>
                <input class="form__input form__input_mg-bottom-13" name="email" type="email" 
         value="trubnikoviv84@gmail.com" disabled>
            </div>

            <div class="form__group">
                <label for="" class="form__label-input">Пароль</label>
                <input class="form__input form__input_mg-bottom-16" name="pass" type="password" 
        placeholder="Введите пароль" required> 
            </div>

            <div class="form__group">
                <label class="form__label-checkbox">
                    <input class="form__checkbox" name="checkbox" type="checkbox"> 
                    Я согласен получать обновления на почту
                </label>
            </div>
            <div class="form__button-block">
                <button class="form__btn" type="submit">Войти</button> 
            </div>
        </form>
        </div>
        </body>
       </html>

2 ответа 2

0

Здесь хитрость заключается в том, что оригинальный <input> скрывается и за отрисовку будет отвечать следующий элемент:

/* Оригинальный input */
.form__checkbox{
  display: none;
}
/* Обычное состояние */
.form__checkbox + span::after {
  content: "☐";
  font-size: 2em;
  position: relative;
}
/* Состояние с галочкой */
.form__checkbox:checked + span::after {
  content: "☑︎";
}

В качестве галочки использовал символы UTF-8.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    
    background: #1B2473;
    color: #787878;
    font-family: Roboto;
    font-size: 16px;
   
    }
    .wrapper {
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
    }


    .form {
    max-width: 600px;
    width: 100%;
    padding: 26px 46px 26px 45px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.25);
    }
    .form__title {
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    line-height: 100%;
    margin-bottom: 17px;
    }
    .form__group {
    
    }
    .form__input_mg-bottom-13 {
    margin-bottom: 13px;
    }
    .form__input_mg-bottom-16 {
    margin-bottom: 16px;
    }
    .form__label-input {
    font-weight: bold;
    line-height: 100%;
    
     }
    .form__input {
    max-width: 509px;
    width: 100%;
    height: 49px;
    border: 2px solid #787878;
    color: #787878;
    border-radius: 10px;
    margin-top: 3px;
    padding: 0 0 0 10px;
    font-size: 28px;
    }
    .form__input::placeholder {
    font-weight: bold;
    line-height: 129%;
    color: #cccccc;
    }

    .form__label-checkbox {
    position: relative;
    font-size: 14px;
    line-height: 114%;
    margin-bottom: 52px;
    display: inline-flex;
    align-items: center;
    align-content: center;
    }
    /* .form__checkbox {
    margin-right: 10px;
    width: 24px;
    height: 24px;
    border: 2px solid #787878;
    border-radius: 7px; 
    
    } */
    .form__checkbox {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    }
   /* .form__label-checkbox::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 2px solid #787878;
    border-radius: 7px; 
    position: relative;
    }*/
    
    .form__checkbox{
      display: none;
    }
   .form__checkbox + span::after {
      content: "☐";
      font-size: 2em;
      position: relative;
    }
   .form__checkbox:checked + span::after {
      content: "☑︎";
    }

    .form__btn {
    width: 180px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 67%;
    background: #1A226B;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    padding: 18px 56px 18px 55px;
    }
    .form__btn:hover {
    background: #3e4588;
    }
    .form__button-block {
    display: flex;
    justify-content: center;
    align-items: center;
    }



      /* ------------- 320 - 768------------------------- */

      @media (max-width: 768px) {

      .form {
        max-width: 728px;
        height: 100%;
        
     }
     .form__title {
        font-size: 60px;
        line-height: 83%;
        margin-bottom: 13px;
      }
     .form__group {
      }
     .form__label-input {
        font-size: 24px;
        line-height: 67%;
     }
     .form__input {
        max-width: 638px;
        margin-top: 8px;        
     }
     .form__input::placeholder {
        color: #cccccc;
     }
    
    .form__label-checkbox {
        font-size: 18px;
        line-height: 89%;
        margin-bottom: 64px;
    }
    .form__checkbox {
        width: 32px;
        height: 32px;
    }
    .form__button-block {
    }
    .form__btn {
        max-width: 220px;
        min-height: 80px;
        padding: 32px 64px;
        display: flex;
        justify-content: center;
        align-items: center;
       }
      }
<!DOCTYPE html>
      <html lang="en">
      <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Roboto:regular,700&display=swap" 
       rel="stylesheet" />
       <title>Form</title>
      </head>
      <body>
      <div class="wrapper">
        <form action="#" class="form">

            <h1 class="form__title">Вход</h1>

            <div class="form__group">
                <label for="" class="form__label-input">Email</label>
                <input class="form__input form__input_mg-bottom-13" name="email" type="email" 
         value="trubnikoviv84@gmail.com" disabled>
            </div>

            <div class="form__group">
                <label for="" class="form__label-input">Пароль</label>
                <input class="form__input form__input_mg-bottom-16" name="pass" type="password" 
        placeholder="Введите пароль" required> 
            </div>

            <div class="form__group">
                <label class="form__label-checkbox">
                    <input class="form__checkbox" name="checkbox" type="checkbox"> 
                    <span> </span> Я согласен получать обновления на почту
                </label>
            </div>
            <div class="form__button-block">
                <button class="form__btn" type="submit">Войти</button> 
            </div>
        </form>
        </div>
        </body>
       </html>

4
  • А как с помощью after сделать зачеканый чекбокс? 25 ноя 2021 в 4:03
  • Ну можно поменять местами символы и ☑︎, тогда по умолчанию он будет выделенный. А по другому только если в тег <input> вписать checked.
    – DiD
    25 ноя 2021 в 4:10
  • @ИгорьТрубников я просто не до конца понимаю что именно вы имеете в виду? что вы хотите получить? и как вы хотите это сделать? Посмотрите сниппет в ответе, нажмите кнопку выполнить код. Потом раскройте на всю страницу, если форма не влезает.
    – DiD
    25 ноя 2021 в 4:15
  • @ИгорьТрубников чуть подкорректировал ответ. Надеюсь, так понятнее...
    – DiD
    25 ноя 2021 в 4:20
0
 .form__checkbox {
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #777;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin-right: 4px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

.form__checkbox:checked::after{
    visibility: visible;
}

.form__checkbox::after{
    content: "\2714";
    position: absolute;
    visibility: hidden;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    body {
    
    background: #1B2473;
    color: #787878;
    font-family: Roboto;
    font-size: 16px;
   
    }
    .wrapper {
    min-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
    }


    .form {
    max-width: 600px;
    width: 100%;
    padding: 26px 46px 26px 45px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.25);
    }
    .form__title {
    text-align: center;
    font-size: 50px;
    font-weight: bold;
    line-height: 100%;
    margin-bottom: 17px;
    }
    .form__group {
    
    }
    .form__input_mg-bottom-13 {
    margin-bottom: 13px;
    }
    .form__input_mg-bottom-16 {
    margin-bottom: 16px;
    }
    .form__label-input {
    font-weight: bold;
    line-height: 100%;
    
     }
    .form__input {
    max-width: 509px;
    width: 100%;
    height: 49px;
    border: 2px solid #787878;
    color: #787878;
    border-radius: 10px;
    margin-top: 3px;
    padding: 0 0 0 10px;
    font-size: 28px;
    }
    .form__input::placeholder {
    font-weight: bold;
    line-height: 129%;
    color: #cccccc;
    }

    .form__label-checkbox {
    position: relative;
    font-size: 14px;
    line-height: 114%;
    margin-bottom: 52px;
    display: inline-flex;
    align-items: center;
    align-content: center;
    }
    /* .form__checkbox {
    margin-right: 10px;
    width: 24px;
    height: 24px;
    border: 2px solid #787878;
    border-radius: 7px; 
    
    } */
 .form__checkbox {
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #777;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin-right: 4px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

.form__checkbox:checked::after{
    visibility: visible;
}

.form__checkbox::after{
    content: "\2714";
    position: absolute;
    visibility: hidden;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;

}

    .form__btn {
    width: 180px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    line-height: 67%;
    background: #1A226B;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    padding: 18px 56px 18px 55px;
    }
    .form__btn:hover {
    background: #3e4588;
    }
    .form__button-block {
    display: flex;
    justify-content: center;
    align-items: center;
    }



      /* ------------- 320 - 768------------------------- */

      @media (max-width: 768px) {

      .form {
        max-width: 728px;
        height: 100%;
        
     }
     .form__title {
        font-size: 60px;
        line-height: 83%;
        margin-bottom: 13px;
      }
     .form__group {
      }
     .form__label-input {
        font-size: 24px;
        line-height: 67%;
     }
     .form__input {
        max-width: 638px;
        margin-top: 8px;        
     }
     .form__input::placeholder {
        color: #cccccc;
     }
    
    .form__label-checkbox {
        font-size: 18px;
        line-height: 89%;
        margin-bottom: 64px;
    }

    
    .form__checkbox {
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid #777;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin-right: 4px;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

.form__checkbox:checked::after{
    visibility: visible;
}

.form__checkbox::after{
    content: "\2714";
    position: absolute;
    visibility: hidden;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
 
}
    
    
    .form__button-block {
    }
    .form__btn {
        max-width: 220px;
        min-height: 80px;
        padding: 32px 64px;
        display: flex;
        justify-content: center;
        align-items: center;
       }
      }
      <!DOCTYPE html>
      <html lang="en">
      <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Roboto:regular,700&display=swap" 
       rel="stylesheet" />
       <title>Form</title>
      </head>
      <body>
      <div class="wrapper">
        <form action="#" class="form">

            <h1 class="form__title">Вход</h1>

            <div class="form__group">
                <label for="" class="form__label-input">Email</label>
                <input class="form__input form__input_mg-bottom-13" name="email" type="email" 
         value="trubnikoviv84@gmail.com" disabled>
            </div>

            <div class="form__group">
                <label for="" class="form__label-input">Пароль</label>
                <input class="form__input form__input_mg-bottom-16" name="pass" type="password" 
        placeholder="Введите пароль" required> 
            </div>

            <div class="form__group">
                <label class="form__label-checkbox">
                    <input class="form__checkbox" name="checkbox" type="checkbox"> 
                    Я согласен получать обновления на почту
                </label>
            </div>
            <div class="form__button-block">
                <button class="form__btn" type="submit">Войти</button> 
            </div>
        </form>
        </div>
        </body>
       </html>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.