CSS：調整大小複選框

Question

有沒有辦法調整的<input type="checkbox" />

我已經嘗試過使用style="width:30px; height:50px;"方法維度，但沒有奏效。 任何想法？這甚至有可能嗎？

Answer 1

不，我不認爲有辦法通過只使用HTML/CSS。

你可以做一個覆蓋（div），它位於複選框的正上方並使其可見。使用此疊加層，您可以添加自己的複選框圖形，並在用戶單擊圖像時更改其圖像（= 可見值）。 Furhtermore您必須手動更新實際複選框的值，以確保可以發送包含複選框的表單值的表單。

這種技術通常使用RIA框架類似的Qooxdoo，ExtJS的，等等

here你會發現如何使用所描述的技術一個非常好的例子。

Answer 2

是的，這是可能的。

您可以使用transform CSS屬性的scale函數更改複選框的大小，該屬性可以放大或縮小複選框。

Firefox 16.0+和Internet Explorer 10.0+支持直接調用transform屬性，而舊版本和基於Webkit的瀏覽器（Chrome，Safari）需要自己的前綴（more on browser compatibility）。

簡單的例子：

<style type="text/css"> 
    input[type="checkbox"] { 
    /* Double-sized Checkboxes */ 
    transform: scale(2);   /* FF 16+, IE 10+ */ 
    -webkit-transform: scale(2); /* Chrome, Safari 3.5+, Opera 15+ */ 

    -ms-transform: scale(2);  /* legacy: IE 9+ */ 
    -moz-transform: scale(2); /* legacy: FF 3.5+ */ 
    -o-transform: scale(2);  /* legacy: Opera 10.5 */ 
    } 
</style> 

... 

<form> 
    <input type="checkbox" /> 
</form>