JQuery datepicker month dropdown border not showing properly in firefox

Question

I am using bootstrap, and jQuery datepicker. When I am clicking the date field, and want to change the month the border not showing properly. Please have a look on image:

here is HTML:

<div class="col-sm-4 control-group" id="datepicker1">
    <label for="dob" class="control-label">Date of Birth (A.D)</label>
    <input type="text" id="datepicker" maxlength="20" value="${criteria.dateOfBirthAD}" class="form-control input-sm req" name="dateOfBirthAD"/>
</div>

and the Javascript:

$("#datepicker").datepicker({
    onSelect: function(value, ui) {
        var today = new Date(),
                dob = new Date(value),
                m = today.getMonth() - dob.getMonth(),
                age = today.getFullYear() - ui.selectedYear;
        if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) {
            age--;
        }

        if (age < 18) {
            $('#datepicker1').addClass('has-error');
            jAlert("At least 18 year required for apply");
        }
        else {
            $('#datepicker1').removeClass('has-error').addClass('has-success');
        }
    },
    maxDate: new Date(),
    changeMonth: true, 
    changeYear: true, 
    dateFormat: "yy/mm/dd"
});

Answer 1

Try reducing the font size of the date picker.

div.ui-datepicker {
    font-size: 62.5%;
}