Блог

Главная - Вопросы по программированию - пользовательский флажок html/css может срабатывать только при щелчке, а не вне поля

пользовательский флажок html/css может срабатывать только при щелчке, а не вне поля

#html #css

Вопрос:

У меня есть пользовательский флажок, который срабатывает за пределами поля, когда я нажимаю на страницу в специальной области, например, несколько пикселей вокруг поля в строке. как я могу исправить то, что он срабатывает только в поле по щелчку мыши?

HTML:

  <label class="container">
 <input type="checkbox" value="1" name="publish" checked="checked">
 <span class="checkmark"></span>
 </label>

CSS:

 input[type=checkbox] {
                        visibility: hidden;
                        }
                        .checkmark {
                          position: fixed;
                          margin-top: -6px;
                          margin-left: 500px;
                          height: 25px;
                          width: 25px;
                        }
                        .container:hover input ~ .checkmark {
                          background-color: #ccc;
                        }
                        .container input:checked ~ .checkmark {
                          background-color: #5865F2;
                        }
                        .checkmark:after {
                          content: "";
                          position: absolute;
                          display: none;
                        }
                        .container input:checked ~ .checkmark:after {
                          display: block;
                        }
                        .container .checkmark:after {
                          left: 9px;
                          top: 5px;
                          width: 5px;
                          height: 10px;
                          border: solid white;
                          border-width: 0 3px 3px 0;
                          -webkit-transform: rotate(45deg);
                          -ms-transform: rotate(45deg);
                          transform: rotate(45deg);
                        }

Комментарии:

1. Пожалуйста, объясните более подробно, что вы хотите получить, и мы обязательно вам поможем.

2. Или покажите проблему на скриншоте.

Ответ №1:

Теперь все работает правильно.

 <label class="container">
 <input type="checkbox" value="1" name="publish" checked="checked">
 <span class="checkmark"></span>
 </label>
 <style>
input[type=checkbox] {
                        visibility: hidden;
                        }
                        .checkmark {
                          position: fixed;
                                     border: 2px solid black;
               margin-top: -6px;
                          margin-left: 500px;
                          height: 25px;
                          width: 25px;
                        }
                        .container:hover input ~ .checkmark {
                          background-color: #ccc;
                        }
                        .container input:checked ~ .checkmark {
                          background-color: #5865F2;
                        }
                        .checkmark:after {
                          content: "";
                          position: absolute;
                          border: 2px solid black;
                          display: none;
                        }
                        .container input:checked ~ .checkmark:after {
                          display: block;
                        }
                        .container .checkmark:after {
                          left: 9px;
                          border: 2px solid black;
                          top: 5px;
                          width: 5px;
                          height: 10px;
                          border: solid white;
                          border-width: 0 3px 3px 0;
                          -webkit-transform: rotate(45deg);
                          -ms-transform: rotate(45deg);
                          transform: rotate(45deg);
                        }
</style>
Метки: ,