如何在基于手机或平板电脑浏览器的网页中增加复选框大小

Question

我为手机/平板电脑设计了一个网页。当我在手机/平板电脑浏览器中打开它时，复选框看起来很小，很难识别它是否被选中。我尝试过css。但没有用。

我们如何增加手机/平板电脑浏览器网页复选框的大小？还有什么解决办法吗？

Answer 1

try:

<input type="checkbox" style="min-height:80px;min-width:80px;">

"min-"语句是你的朋友；-）

Answer 2

input[type=checkbox] {
  /* All browsers except webkit*/
  transform: scale(2);
  /* Webkit browsers*/
  -webkit-transform: scale(2);
}

Answer 3

input[type=checkbox]:checked {
   background: url("data:image/png,%89PNG[...]") no-repeat center center;
   -webkit-background-size: 28px 28px; /* shrink high resolution background */
 }

检查此链接http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit

Answer 4

或者您可以使用uniform或jQuery Mobile进行尝试。