单选按钮在Firefox中不起作用

I've done a lot of research on this, but still have not been able to determine why my buttons are not working. They work if you double click them, but not single click. The inputs are not wrapped in label tags.

我已经对此做了很多研究,但仍然无法确定我的按钮无法正常工作的原因。如果双击它们,它们可以工作,但不能单击。输入未包含在标签标签中。

<div id="map-overlay">
<div id="filters" class="menu-ui">
    <form>

        <label for="Perm. < 5 years" class="radio-label"></label>
        <input id="Perm. < 5 years" name="checkbox" type="radio">


        <label for="Temp. < 5 years" class="radio-label"></label>
        <input id="Temp. < 5 years" name="checkbox" type="radio">


        <label for="Temp. > 5 years" class="radio-label"></label>
        <input id="Temp. > 5 years" name="checkbox" type="radio">


        <label for="Perm. > 5 years" class="radio-label"></label>
        <input id="Perm. > 5 years" name="checkbox" type="radio">

    </form>
</div>

These work fine in Chrome, Safari, etc.

这些在Chrome,Safari等中运行良好。

1 个解决方案

#1

First I think you should re think your Ids since they look malformed and would not be very useful for targeting via css.

首先,我认为你应该重新思考你的ID,因为它们看起来格格不入,并且对于通过css进行定位不会非常有用。

Second I think your HTML should look more like this

其次我认为你的HTML应该更像这样

    <label for="Permlt5Years" class="radio-label">
         Perm. < 5 years
         <input id="Permlt5Years" name="checkbox" type="radio">
    </label>

Clicking on a label should select a radio button for you. When validating via direct input here https://validator.w3.org/check against html5 doctype it had 11 errors.

单击标签应为您选择一个单选按钮。通过直接输入验证https://validator.w3.org/check对html5 doctype它有11个错误。

#1