Как мне сделать этот флажок перед моим элементом h3?

У меня есть эта разметка HTML и CSS:

body {
  background-color: #f5f5f5;
}

._contain_items {
  display: block;
  width: 1000px;
  height: fit-content;
  border: 1px solid rgba(0, 0, 0, .12);
  background-color: #ffffff;
}

._inline_task {
  display: flex;
  flex-direction: row;
}

._when {
  margin-top: 0% !important;
  margin-left: auto;
  margin-bottom: 0% !important;
  align-self: flex-end;
}

._lightweighted {
  margin-top: 0% !important;
  font-size: 16px;
  font-weight: 500;
  color: #7f8ca1;
}

._title_task {
  margin-top: 0% !important;
  margin-bottom: 0% !important;
}

.checkbox-container {
  width: 50px;
  height: 28px;
  display: flex;
  align-items: center;
  margin-right: 10px;
  position: relative;
}

.checkbox-container label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: relative;
  top: 0;
  width: 28px;
}

.checkbox-container label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: relative;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

.checkbox-container input[type = "checkbox"] {
  visibility: hidden;
}

.checkbox-container input[type = "checkbox"]:checked+label {
  background-color: #66bb6a;
  border-color: #66bb6a;
}

.checkbox-container input[type = "checkbox"]:checked+label:after {
  opacity: 1;
}
<div class = "_contain_items">
  <h3> Employee Tasks </h3>
  <hr style = "border: none;height: 1px;background-color: #333;">

  <div class = "_inline_task">

    <div class = "checkbox-container">
      <input type = "checkbox" id = "checkbox" />
      <label for = "checkbox"></label>
    </div>

    <h3 class = "_title_task"> Title of the task </h3>
    <h3 class = "_when"> Tomorrow </h3>

  </div>

  <p class = "_lightweighted"> Housekeeping </p>

</div>

</body>

Проблема, с которой я столкнулся, связана с флажком. Я хочу сделать кружок флажком с этим знаком ✔️. Когда position есть absolute, он работает, как задумано, но не раньше h3(название задачи). Когда я меняю position на relative, круг появляется в нужном месте, но знака там нет. Как мне сделать так, чтобы он появлялся перед h3?

Вы пробовали вставить тег <h3> внутри тега <label>?

BigBoyProgrammer 09.02.2023 19:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
57
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Есть некоторые проблемы с доступностью, поэтому вот мои рекомендации:

Итак, вот ваш код с моими соображениями

<div class = "checkbox">
  <input type = "checkbox" id = "checkbox" checked/>
  <label for = "checkbox">
    <span class = "title-task">Title of the task</span>
    <span class = "when">Tomorrow</span>
  </label>
</div>

и флажок css с этим:

.checkbox>label {
  position: relative; /* Create a positioning context */
  /* ... */
}
.checkbox>label:before {
  /* checkbox styling */
  /* ... */
}
.checkbox>input {
  /* hide the checkbox */
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.checkbox>input:checked+label:before {
  /* checkbox checked styling */
  /* ... */
}
.checkbox>input+label:after {
  /* checkbox checked icon */
  position: absolute; /* Position the checkmark */
  /* ... */
}
.checkbox>input:checked+label:after {
  /* ... */
}

Здесь я оставил вам полнофункциональный фрагмент с вашим модифицированным кодом.

.contain-items {
  background-color: #fff;
  display: block;
  height: fit-content;
  width: 100%;
}

.divider {
  background-color: #333;
  border: none;
  height: 1px;
}

.inline-task {
  display: flex;
  /* row by default */
  flex-wrap: wrap;
}

.checkbox {
  width: 100%;
}

.checkbox>label {
  align-items: center;
  display: flex;
  position: relative;
}

.checkbox>label:before {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  content: '';
  cursor: pointer;
  display: inline-block;
  height: 1.75rem;
  margin-right: 0.5rem;
  width: 1.75rem;
}

.checkbox>input {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.checkbox>input:checked+label:before {
  background-color: #66bb6a;
  border-color: #66bb6a;
}

.checkbox>input+label:after {
  border: 2px solid #fff;
  border-right: none;
  border-top: none;
  content: '';
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute;
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

.checkbox>input:checked+label:after {
  opacity: 1;
}

.lightweighted {
  color: #7f8ca1;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}
<body>
  <div class = "contain-items">
    <h3>Employee Tasks</h3>
    <hr class = "divider" />
    <article class = "inline-task">
      <div class = "checkbox">
        <input type = "checkbox" id = "checkbox" checked/>
        <label for = "checkbox">
          <span class = "title-task">Title of the task</span>
          <span class = "when">Tomorrow</span>
        </label>
      </div>
      <p class = "lightweighted">Housekeeping</p>
    </article>
  </div>
</body>

Спасибо, интерфейс не моя сильная сторона, и иногда я немного борюсь с этими вещами. Было очень мило, что ты предложил, что мне нужно посмотреть в следующий раз. Слава!!

thecow milk 11.02.2023 17:15

Другие вопросы по теме