HTML/CSS：如何在放大時使複選框增長，縮小時如何縮小複選框？

我有測試這個簡單的代碼：HTML/CSS：如何在放大時使複選框增長，縮小時如何縮小複選框？

<html> 
<head> 
<style type="text/css"> 
    ul{ 
     float:left; 
     margin:0; 
     list-style:none; 
     padding:0; 
     } 
</style> 
    </head> 
<body> 
    <ul> 
     <li><input type="checkbox" id="c1" class="checkBox">a</li> 
     <li><input type="checkbox" id="c2" class="checkBox"/>b</li> 
     <li><input type="checkbox" id="c3" class="checkBox"/>c</li> 
    </ul> 
    <ul> 
     <li><input type="checkbox" id="c4" class="checkBox"/>d</li> 
     <li><input type="checkbox" id="c5" class="checkBox"/>e</li> 
      <li><input type="checkbox" id="c6" class="checkBox" />f</li> 
    </ul> 
    <ul> 
     <li><input type="checkbox" id="c7" class="checkBox"/>g</li> 
     <li><input type="checkbox" id="c8" class="checkBox"/>h</li> 
     <li><input type="checkbox" id="c9" class="checkBox"/>i</li> 
    </ul> 
</body> 
</html>

這裏是結果：

enter image description here

但如果我縮小文本變小，但複選框保持不變

enter image description here

，如果我放大文字變大，但仍復選框同樣

enter image description here

是有可能讓這個複選框會改變它們的大小呢？比如與他們標籤的大小成比例？由於事先

來源

2012-12-08 ksm001

你不能做到這一點，順便說一句，你已經標記了問題完全錯誤 –

感謝注意到，他們是我用我想問一個問題標籤但最終從未做過。 – ksm001

是的，你不能調整複選框的大小。你不能設置複選框的樣式。它們由操作系統渲染。我知道一個解決方案 - 使用JS來隱藏複選框，然後創建一個新的html元素（span，div）來代替並模擬行爲。然後，您可以使用媒體查詢來設置這個新元素的樣式。 – marinbgd

jsFiddle DEMO

使用CSS3放大的清單，以及瀏覽器中呈現複選框！

.extraLarge ul { 
    -moz-transform: scale(1.50); 
    -webkit-transform: scale(1.50); 
    -o-transform: scale(1.50); 
    transform: scale(1.50); 
    padding: 10px; 
}

來源

2013-01-11 02:59:32 arttronics

我甚至不知道這是可能的。好東西:) – Tx3

嚴格來說，這並不能解決OP所描述的問題：當您更改瀏覽器縮放時，除默認縮放外，複選框仍然會太小或太大。 –

您可以通過使用與CSS3一個做到這一點：檢查選擇。這樣做是使用帶有背景圖像的樣式化輸入。所以當你放大/縮小時，它會隨着文本一起重新調整大小。不幸的是，它不適用於IE9及以下版本。

CSS：

.theCheckbox input { 
    display: none; 
} 

.theCheckbox span { 
    width: 20px; 
    height: 20px; 
    display: block; 
    background: url("link_to_image"); 
} 

.theCheckbox input:checked + span { 
    background: url("link_to_checked_image"); 
}

HTML：

<label for="test">Label for checkbox</label> 
<label class="theCheckbox"> 
    <input type="checkbox" name="test"/> 
    <span></span> 
</label>

來源

2013-01-11 02:12:28 DaKoder

[** jsFiddle DEMO **]（http://jsfiddle.net/uFu2y/） – arttronics

** + 1 **很好的回答！ – arttronics

Firefox有一個「僅文本」變焦功能，與鍍鉻缺乏此功能。

爲了一切變焦在Firefox，刪除勾選並重置縮放級別。

enter image description here

對於Chrome瀏覽器，看看有此功能放大插件。

來源

2013-01-11 05:29:38 arttronics

你可以創建自己的CheckBox控件，這樣你就不會依賴本地操作系統的實現。當您使用常見的HTML元素創建它時，瀏覽器縮放將順利進行。

有很多現有的插件的圖書館（如jQuery）

來源

2013-01-11 20:35:17 Tx3

HTML/CSS：如何在放大時使複選框增長，縮小時如何縮小複選框？

回答

相關問題