eisenbahnfans.ch Checkbox CSS

#checkbox {
    float:left;
    margin-top:-35pt;
    margin-left:0px;
    margin-bottom:0px;
    margin-right:0px;
    padding-right: 15px;
    width:100%;
    height:0px;
}

#checkbox a:link    { color:black;   text-decoration:none; }
#checkbox a:visited { color:black;  text-decoration:none; }
#checkbox a:focus   { color:black;  text-decoration:none; }
#checkbox a:hover   { color:black; font-weight: bold; text-decoration:none; }
#checkbox a:active  { color:black; text-decoration:none; }

.checkbox {
    display: block;
    position: relative;
    z-index: 2;
}

.checkbox input[type=checkbox] {
    display: none;
}

.checkbox label {
    position: relative;
    display: inline-block;
    width:100%;
    padding: 8px 0px 8px 30px;
    background: red;
    color: #fff;
    font-weight: 600;
    font-size: 20pt;
    text-transform: uppercase;
    cursor: pointer;
}

.checkbox label:before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 50%;
    left: 11px;
    margin-top: -9pt;
    border-left: 8pt solid #fff;
    border-top: 8pt solid transparent;
    border-right: 8pt solid transparent;
    border-bottom: 8pt solid transparent;
}

.checkbox input[type=checkbox]:checked ~ label:before {
    margin-left: -5pt;
    margin-top: -4pt;
    border-left: 8pt solid transparent;
    border-top: 8pt solid #fff;
    border-bottom: 8pt solid transparent;
    border-right: 8pt solid transparent;
}

.checkbox h4 {
     background-color:silver;
     display: none;
     border-top:1px black solid;
     border-left:25px red solid;
     border-bottom:0px red solid;
     border-right:2px red solid;
     margin:0px;
     width:99.1%;
     padding:8px;
     font-weight:lighter;
}

.checkbox input[type=checkbox]:checked ~ h4 {
    display: block;
}