如何使複選框看起來像一個按鈕，適合所有屏幕尺寸

下面我有一個複選框：如何使複選框看起來像一個按鈕，適合所有屏幕尺寸

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

我的問題很簡單如何將複選框轉換成看起來像一個按鈕。我希望設計可以在所有瀏覽器上工作，並可以在所有屏幕尺寸上工作，但是有人知道如何做到這一點？

來源

2013-02-08 user1723760

你能舉一個你想要的例子嗎？ – David 2013-02-08 15:01:49

[Duplicate？]（http://stackoverflow.com/questions/4 148499） – 2013-02-08 15:04:04

@大衛像這個小提琴，但測量能夠在所有的屏幕尺寸上工作，我認爲在小提琴中的一個是爲了一個特定的屏幕尺寸：http://jsfiddle.net/zAFND/4/ – user1723760 2013-02-08 15:07:25

你只需要玩填充。

來源

2013-02-08 15:25:25 David

可以使用HTML <標籤>元素：

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

然後使用CSS樣式的標籤和隱藏複選框（使用的位置是：絕對有負面頂部/左

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

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

來源

2013-02-08 15:05:31

如何使複選框看起來像一個按鈕，適合所有屏幕尺寸

回答

相關問題