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

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＆lt; label＆gt;元素：

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

然后你使用CSS来设置标签样式并隐藏复选框（使用position：absolute with negative top / left

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

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

Answer 2

你只需要玩填充物。