html - 如何使复选框看起来像一个按钮并适合所有屏幕尺寸

Question

我在下面有一个复选框：

foreach($options as $indivOption) {
   echo '<input type="checkbox" name="options[]" id="option-' . $indivOption . 
        '" value="' . $indivOption . '" /><label for="option-' . $indivOption . 
        '">' . $indivOption . '</label>';
}

我的问题只是如何将复选框转换为看起来像一个按钮。我希望该设计适用于所有浏览器并适用于所有屏幕尺寸，但有人知道如何做到这一点吗？

Answer 1

您可以使用 html <label> 元素：

<label>Button<input type="checkbox"></label>

然后你使用 CSS 来设置标签的样式并隐藏复选框（使用 position: absolute 和负的 top/left

label {
    overflow: hidden;
    display: block;
    background: red;
    ...
}

label input[type="checkbox"] {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

Answer 2

你只需要玩弄填充。