Archive dropdown styling not applied

I am trying to add a custom dropdown for archives but struggling with couple of mistakes that might be the reason why it doesn’t work.

The CSS only gives my dropdown the width, not the other styles included for it. I am pretty sure the issue is about PHP. I can’t attach option values to more than just the first choice. How can I fix that?

PHP

<select id="cd-dropdown" name="cd-dropdown" class="cd-select"                   onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="-1"><?php echo attribute_escape(__('Select Month')); ?></option>
<?php wp_get_archives('type=monthly&format=option&show_post_count=1'); ?> </select>

CSS

.cd-dropdown > span,
.cd-dropdown ul li:nth-last-child(-n+3) span {
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

I think the problem is about values. I am trying to style my dropdown the way Codrops teaches: here. Right now I don’t get any style at all to my dropdown, except the width that is set to 300.

1 Answer
1

You’re targeting cd-dropdown with a class indicator (the period), the cd-dropdown is an ID and should therefore be targeted with the ID selector (a hashtag).

#cd-dropdown > span,
#cd-dropdown ul li:nth-last-child(-n+3) span {
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

Leave a Comment