Using the css "checkbox hack" to trigger the display of a form when a label is clicked. The form is styled using a :before pseudo element to create a transparent background, but the z-index is not working as expected. Despite adjusting z-index values, the form elements appear on top of the pseudo element.
Attempting to resolve the issue, I wrapped the form in a div element, which solved the problem but caused validation errors with the w3c validator. Exploring the use of a pseudo element as an alternative solution.
The form uses absolute positioning while the pseudo element is set to fixed. Despite changing these attributes, the desired effect is not achieved. No other z-indexes have been altered in the CSS.
section input:checked + .modal_form:before {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
background-color: rgba(0, 0, 0, .3);
z-index: 0;
}
section input:checked + .modal_form {
display: block;
position: absolute;
top: 108px;
left: 50%;
margin-left: -290px;
z-index: 2;
}
.modal_form {
box-sizing: border-box;
width: 580px;
padding: 36px 40px 40px 30px;
background-color: white;
}<label for="modal_toggle">
<span class="todo">Item 1</span>
<input type="checkbox" id="modal_toggle" />
<form action="#" method="post" class="modal_form">
<fieldset>
<dl>
<dt>
<label for="title">Title</label>
</dt>
<dd>
<input type="text" id="title" name="title" placeholder="Todo Name" />
</dd>
</dl>
<dl>
<dt>
<label>Due Date</label>
</dt>
<dd>
<input type="number" name="day" min="1" max="31" placeholder="Day" />
<!--
--><span class="separator">/</span>
</dd>
<!--
-->
<dd>
<input type="number" name="month" min="1" max="12" placeholder="Month" />
<!--
--><span class="separator">/</span>
</dd>
<!--
-->
<dd>
<input type="number" name="year" min="2017" max="2099" placeholder="Year" />
</dd>
</dl>
<dl>
<dt class="top_align">
<label for="description">Description</label>
</dt>
<dd class="description">
<textarea name="description" id="description" placeholder="Description"></textarea>
</dd>
</dl>
</fieldset>
<fieldset class="field_align">
<input type="submit" value="Save" />
<input type="submit" value="Mark As Complete" />
</fieldset>
</form>
</label>Seeking assistance to resolve this issue. Thank you.