I have a menu that looks like this:

Each menu item is a radio button with the radio button hidden and the label styled. And I want the style to change when the radio button is selected.

Here is the HTML:

    <div class="sidebarmenu">
        <input type="radio" value="atoz" name="searchorder" id="orderatoz" checked /><label for="orderatoz">A -> Z</label>
        <input type="radio" value="bydate" name="searchorder" id="orderbydate" /><label for="orderatoz">ByDate</label>
        <hr />
        <input type="radio" value="combined" name="searchtype" id="typecombined" checked /><label for="typecombined">Combined</label>
        <input type="radio" value="combined" name="searchtype" id="typeartist" /><label for="typeartist">Artist</label>
        <input type="radio" value="release" name="searchtype" id="typerelease" /><label for="typerelease">Release</label>
        <input type="radio" value="recording" name="searchtype" id="typerecording" /><label for="typerecording">Recording</label>
    </div>

And here is the css:

.sidebarmenu input[type=radio] {
    display: none
}

.sidebarmenu label {
    background-color: papayawhip;
    border-radius: 6px 0 0 0;
    color: saddlebrown;
    font-family: serif;
    font-size: small;
    hyphens: auto;
    margin-bottom: 1px;
    padding: 3px 3px 3px 13px;
    text-indent: -10px;
    display: block;
    border-top: saddlebrown 1px solid;
    border-left: saddlebrown 1px solid;
}

    .sidebarmenu label + input[type=radio]:checked {
        background-color: oldlace;
        box-shadow: -40px 0px 20px #ffffff, 40px 0px 20px #ffffff;
        font-weight: bold;
        z-index: 99;
    }

I took the css from an answer at CSS – How to Style a Selected Radio Buttons Label?, but for some reason, it’s not working. Am I missing something?