Firefox bug

by AntowaKartowa

HTML

<section class="wrap">
    <div class="btn-filter">
        <div class="btn-txt">Filter by</div>
        <ul class="btn-sub">
            <li><label for="filter11">Filter 1 <input type="radio" name="filter1" id="filter11" value="1" class="btn-input"></label></li>
            <li><label for="filter12">Filter 2 <input type="radio" name="filter1" id="filter12" value="2" class="btn-input"></label></li>
            <li><label for="filter13">Filter 3 <input type="radio" name="filter1" id="filter13" value="3" class="btn-input"></label></li>
            <li><label for="filter14">Filter 4 <input type="radio" name="filter1" id="filter14" value="4" class="btn-input"></label></li>
            <li><label for="filter15">Filter 5 <input type="radio" name="filter1" id="filter15" value="5" class="btn-input"></label></li>
            <li><label for="filter16">Filter 6 <input type="radio" name="filter1" id="filter16" value="6" class="btn-input"></label></li>
        </ul>
    </div>
    <p class="state"></p>
</section>

CSS

.wrap {
    width: 350px;
    height: 300px;
    margin: 0 auto;
    padding-top: 100px;
}

.btn-filter {
    float: left;
    position: relative;
    width: 75px;
    padding: 7px 15px 5px;
    line-height: 1.3em;
    overflow:hidden;
    background-color: #ccc;
    cursor: pointer;
}

.js-drop {
    overflow: visible;
}

.btn-sub {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    padding: 10px 0 5px;
    margin: 0;
    overflow: hidden;
    background-color: #bbb;
    list-style-type: none;
}

.btn-sub li {
    padding: 0 15px;
}

.btn-sub label {
    display: block;
    padding: 5px 0;
    cursor: pointer;
}

.btn-sub label:hover,
.filter-current {
    color: #fff;
}

.btn-input {
    /* display: inline;
    position: relative;
    height: 0;
    width: 0;
    overflow: hidden;
    z-index: -1;
    visibility: hidden; */
}

.state-wrap {
    text-align: center;
    margin-top: 50px;
}

.state {
    display: inline-block;
    margin: 7px 0 0 10px;
}

JavaScript

$('.btn-filter').on('click', drop);
$('input[name="filter1"]').on('change', indicate);

function drop(e) {
    $(e.currentTarget).toggleClass('js-drop');
}

function indicate(e) {
    var target = $(e.currentTarget).parent(),
        value = e.currentTarget.value,
        button = $('.btn-filter');
    button.toggleClass('js-drop');
    button.find('.filter-current').removeClass('filter-current');
    target.addClass('filter-current');
    
    $('.state').html('Current filter: ' + value);
}