У меня есть эта разметка 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
, которые можно заменить на span
или p
.label
. Также не рекомендуется размещать заголовок внутри лейблаИтак, вот ваш код с моими соображениями
<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>
Спасибо, интерфейс не моя сильная сторона, и иногда я немного борюсь с этими вещами. Было очень мило, что ты предложил, что мне нужно посмотреть в следующий раз. Слава!!
Вы пробовали вставить тег
<h3>
внутри тега<label>
?