增加複選框大小 - Phonegap Android

我正在開發一個使用Phonegap的測驗應用程序，因此HTML，JavaScript & CSS - 沒有其他框架。我的問題是，複選框在Android設備上顯示得非常小。我嘗試在我的CSS中設置寬度爲&的輸入高度[type = checkbox]爲2em，這適用於Chrome和模擬器，但不適用於實際設備（使用Samsung S4 Mini & Asus TF101進行測試）。增加複選框大小 - Phonegap Android

複選框被使用無序列表中 - 這裏的HTML：

<div class="challenge"> 
    <ul> 
    <li><label for="opt0"><input type="checkbox" id="opt0" value="right">Answer A</label></li> 
    <li><label for="opt1"><input type="checkbox" id="opt1" value="wrong">Answer B</label></li> 
    </ul> 
</div>

而這裏的相關CSS：

body { 
    -webkit-touch-callout: none; 
    -webkit-text-size-adjust: none; 
    -webkit-user-select: none; 
    font-family: arial; 
    background-color:white; 
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
    font-size: medium; 
    font-size: 1.5em; 
} 
.savvy_app { 
    position: absolute; 
    overflow: auto; 
    margin: 0; 
    padding: 10px 5px 0 5px; 
    top: 73px; 
    bottom: 2px; 
    max-width: 100%; 
    min-width: 98%; 
} 
input[type=checkbox] { 
    width: 2em; 
    height: 2em; 
} 
.challenge ul { 
    list-style-type: none; 
    padding-left: 10px; 
} 
.challenge ul li, .results ul li { 
    font-family: georgia; 
    font-weight: normal;  
    position: relative; 
    border: none; 
    margin-bottom: 5px; 
    padding-bottom: 0; 
} 
.challenge label, .results label { 
    display: block; 
    padding-left: 50px; 
    padding-top: 5px; 
} 
.challenge input, .results input { 
    display: inline; 
    margin-left: -50px; 
    position: absolute; 
}

我缺少什麼？

來源

2014-10-05 Johan Alberts

嘗試添加'-webkit-appearance：none;'爲複選框 – 2014-10-05 17:57:28

不，我需要顯示覆選框以允許用戶選擇可能的測驗答案。問題是多種選擇，並有不止一個答案。 – 2014-10-05 18:13:26

根據我的經驗，表單元素是所有設備可靠地設計的噩夢，特別是複選框和單選按鈕。

一種解決方案是複選框可見性設置爲隱藏或不透明度爲0，然後用一些CSS如input[type=checkbox]:checked改變旁邊的複選框的跨度的背景圖像。然後，您的背景圖片可以包含一個2狀態複選框，但您希望它看起來像。

圍繞此問題存在很多兼容性和可訪問性問題 - 值得商榷的問題值得商榷。

來源

2014-10-05 19:48:43 MrCarrot

感謝您的回答，但我對此解決方案的主要擔憂是跨平臺兼容性（計劃最終將應用程序移植到IOS設備）以及額外的性能開銷。 – 2014-10-06 22:12:07

恐怕沒有可靠的跨平臺樣式複選框方法 – MrCarrot 2014-10-13 10:55:33

增加複選框大小 - Phonegap Android

回答

相關問題