使用CSS複選框大小更改

如何在沒有class和id的情況下更改複選框大小（globaly）？是否有可能以與以下不同的方式做到這一點：使用CSS複選框大小更改

input[type=checkbox] { 
    zoom: 1.5; 
}

來源

2014-08-28 Klapsius

爲什麼這種方法不適合你？ – 2014-08-28 13:15:38

input字段可以根據需要設置樣式。因此，而不是放大，你可以有

input[type="checkbox"]{ 
    width: 30px; /*Desired width*/ 
    height: 30px; /*Desired height*/ 
}

編輯：

你將不得不像下面這樣添加額外的規則：

input[type="checkbox"]{ 
    width: 30px; /*Desired width*/ 
    height: 30px; /*Desired height*/ 
    cursor: pointer; 
    -webkit-appearance: none; 
    appearance: none; 
}

檢查這個小提琴http://jsfiddle.net/p36tqqyq/1/

來源

2014-08-28 13:13:56 Charleshaa

我想我在我的網站上使用這個...可能是錯誤的檢查 – Charleshaa 2014-08-28 13:15:23

這項工作我只是檢查 – Klapsius 2014-08-28 13:16:15

我站在糾正;我在自己的測試中使用'150％'進行測試，將複選框移動到更大的區域，但保持相同的大小。使用'px'確實會改變複選框本身的大小。此前評論撤回。 – 2014-08-28 13:18:36

您可能想要這樣做。

input[type=checkbox] { 

-ms-transform: scale(2); /* IE */ 
-moz-transform: scale(2); /* FF */ 
-webkit-transform: scale(2); /* Safari and Chrome */ 
-o-transform: scale(2); /* Opera */ 
    padding: 10px; 
}

來源

2014-08-28 13:13:45 Shreejibawa

這不是被接受的答案嗎？ – Rap 2015-02-16 22:36:49

該解決方案對mac中的chrome有問題。複選框是blury – 2015-09-04 12:25:51

你可能想要這樣做，但你可能不這樣做。它超級像素化，不適用於大多數應用程序。 – losmescaleros 2016-08-03 17:16:44

試試這個

<input type="checkbox" style="zoom:1.5;" /> 
/* The value 1.5 i.e., the size of checkbox will be increased by 0.5% */

來源

2014-08-28 13:24:38

不適用於Firefox – 2016-08-12 11:26:08

使用CSS複選框大小更改

回答

相關問題