I've been struggling with this all day, so I would be grateful if any of you CSS wizards can help me with a Mending spell :) I'm trying to create a repeating fieldset with a hide button so that it hides the text area field, but I cannot get it to align with the light blue bar as shown below. Here is the html: <div class="leftsection"> <div class="talents"> <h4>talents</h4> <fieldset class="repeating_talents"> <input type="checkbox" class="cogwheel" /><span></span> <h5> <input type="text" class="talents" name="attr_talent" placeholder="Talent Name" /> <select name="attr_degree" class="talents" selected="novice"> <option>novice</option> <option>expert</option> <option>master</option> </select> </h5> <div class="body"> <textarea class="talents" placeholder="Fulltext"></textarea> </div> </fieldset> </div> <div class="drive"> <h4>drive</h4> <fieldset class="repeating_drive"> <input type="checkbox" class="cogwheel" /><span></span> <h5> <input type="text" class="drive" name="attr_talent" placeholder="Drive Name" /> </h5> <div class="body"> <textarea class="drive" placeholder="Fulltext"></textarea> </div> </fieldset> </div> </div> And here is the CSS: .sheet-leftsection {
box-sizing: border-box;
width: 314px;
display: inline-block;
vertical-align: top;
}
.sheet-talents h4,
.sheet-drive h4 {
display: inline-block;
box-sizing: border-box;
border-bottom: none;
background-color: black;
color: white;
margin-bottom: 10px;
font-family: "spectrashell";
font-size: 25px;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
width: 300px;
position: relative;
left: 7px;
padding: 0;
padding-left: 7px;
line-height: 28px;
}
.sheet-talents h4:before,
.sheet-drive h4:before {
content: "";
position: absolute;
top: 0px;
left: -7px;
bottom: 0;
border-top: 7px solid transparent;
border-right: 8px solid black;
border-bottom: 7px solid transparent;
}
.sheet-talents h4:after,
.sheet-drive h4:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -7px;
border-top: 7px solid transparent;
border-left: 8px solid black;
border-bottom: 7px solid transparent;
}
.sheet-talents h5,
.sheet-drive h5 {
display: inline-block;
box-sizing: border-box;
border-bottom: none;
background-color: #b4d1dd;
margin-bottom: 10px;
width: 300px;
position: relative;
left: 7px;
padding: 0;
padding-left: 7px;
line-height: 28px;
z-index: 1;
}
.sheet-talents h5:before,
.sheet-drive h5:before {
content: "";
position: absolute;
top: 0px;
left: -7px;
bottom: 0;
border-top: 7px solid transparent;
border-right: 8px solid #b4d1dd;
border-bottom: 7px solid transparent;
}
.sheet-talents h5:after,
.sheet-drive h5:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -7px;
border-top: 7px solid transparent;
border-left: 8px solid #b4d1dd;
border-bottom: 7px solid transparent;
}
input[type=text].sheet-talents,
input[type=text].sheet-drive {
box-sizing: border-box;
border: none;
padding: 0px;
margin: none;
border-radius: 0px;
display: inline-block;
width: 150px;
font-family: sans-serif;
font-size: 18px;
background-color: #b4d1dd;
line-height: 28px;
color: #005972;
font-weight: bold;
text-transform: uppercase;
}
select.sheet-talents {
float: right;
box-sizing: border-box;
border: none;
padding: none;
margin-bottom: 0px;
border-radius: 0px;
display: inline-block;
width: 75px;
background-color: #b4d1dd;
line-height: 28px;
}
textarea.sheet-talents,
textarea.sheet-drive {
width: 312px;
margin: 0px 0px 0px 0px;
resize: vertical;
display: inline-block;
padding: 0px;
height: 38px;
min-height: 38px;
}
/* Hide actual checkbox */
input[type="checkbox"].sheet-cogwheel {
opacity: 0;
width: 16px;
height: 16px;
top: 5px;
left: 6px;
margin: -10px;
cursor: pointer;
position: relative;
z-index: 3;
}
/* Fake checkbox */
input[type="checkbox"].sheet-cogwheel + span::before {
margin-right: 4px;
line-height: 14px;
text-align: center;
display: inline-block;
vertical-align: middle;
font-family: pictos;
content: "y";
width: 14px;
height: 14px;
font-size: 12px;
position: relative;
z-index: 2;
}
input[type="checkbox"].sheet-cogwheel:checked + span::before {
display: inline-block;
font-family: pictos;
content: "y";
}
input.sheet-cogwheel:checked ~ div.sheet-body {
display: none;
}
*FIELDSET CONTROLS*/
.repcontrol {
min-height: 27px;
}
.repcontrol .btn {
/*visibility: hidden;*/
border: medium none;
color: white !important;
background: none;
box-shadow: none;
}
.repcontrol .btn:focus {
outline: 0;
}
.repcontrol .repcontrol_edit:after {
content: '(';
visibility: visible;
font-family: pictos;
background-color: #fff;
border: 1px solid black;
border-radius: 2px;
font-size: 12px;
height: 12px;
width: 12px;
padding: 2px 4px 2px 4px;
color: black;
}
.editmode ~ .repcontrol .repcontrol_edit:after {
content: ')';
}
.repcontrol .repcontrol_add:before {
content: '&';
visibility: visible;
font-family: pictos;
background-color: #fff;
border: 1px solid black;
border-radius: 2px;
font-size: 12px;
height: 12px;
width: 12px;
padding: 2px 4px 2px 4px;
color: black;
}
.repcontrol .repcontrol_edit:hover:after,
.repcontrol .repcontrol_add:hover:before
{
background-color: #EFEFEF;
}
.sheet-resources .repcontrol {
margin-top: -10px;
}
.itemcontrol {
z-index: 10;
}
.itemcontrol .repcontrol_del {
font-size: 10px;
margin-top: 3px;
padding: 0px;
height: 18px;
width: 18px;
}
.itemcontrol .repcontrol_move {
font-size: 10px;
margin-top: 3px;
padding: 0px;
height: 18px;
width: 18px;
} I have tried placing the checkbox inside the h5 div and then it lines up perfectly with the input box inside, but then it becomes non-responsive. I'm new to CSS, so any help will be gratefully received. Thanks. EDIT: I realised I copied the html into both snippets above.
