在 Jquery 移动设备中放大复选框

Question

正在尝试使 Jquery 移动页面中的复选框变大。我似乎所做的一切都不会覆盖移动 1.2 样式页面中的默认值 CSS。0.css - 以下是我的 fiddle 工作代码，但无法放大。我试过将 .ul-checkbox 设置为 40px 但没有改变

http://jsfiddle.net/jeffbarclay/xxdrf87q/

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

<div data-role="page" data-theme="b" id="acs">
<div data-role="header">
<h2>Key Performance Indicators</h2> 
</div>

<div data-role="content">    
<ul data-role="listview" data-split-icon="gear" data-theme="c">   
 <li>
   <h1>Assess Cardiac Risk Factors</h1>                                     
     <label>                                               
     <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>                
     <label for="checkbox-2b">
       <label> 
         <h3>Age</h3>
       </label> 
     </label>
     </label>                                              

     <label>
     <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>                
     <label for="checkbox-2b">
       <label> 
         <h3>Diabetes</h3>
       </label> 
     </label>
     </label>
  </li>
</ul>     
</div>
  <div data-role="footer">
  <div data-role="navbar">
  </div>    
    <h4>John Doe</h4>
  </div>        
</div>
 </div>

Answer 1

您可以使用：

#checkbox-2b {
  -ms-transform: scale(4); /* IE */
  -moz-transform: scale(4); /* FF */
  -webkit-transform: scale(4); /* Safari and Chrome */
  -o-transform: scale(4); /* Opera */
  padding: 20px;
}

fiddle

参考文献：

transform

Answer 2

感谢 Alex Char 的修复，在这里澄清我的最后一个问题是对主动提供的多个复选框的解决方案：css 需要添加 z-index：2；应用于顶层复选框并从标签元素中删除 id。通过删除不需要的额外标签来清理额外代码。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

 <div data-role="page" data-theme="b" id="acs">
 <div data-role="header">
   <h2>Key Performance Indicators</h2> 
 </div>

 <div data-role="content">    
   <ul data-role="listview" data-split-icon="gear" data-theme="c">   

   <h1>Assess Cardiac Risk Factors</h1>                                     
     <label>                                               
     <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>                
         <h3>Age</h3>
     </label>                                              

     <label>
     <input type="checkbox" name="checkbox-2b" id="checkbox-2b" data-theme="c"/>                
         <h3>Diabetes</h3>
     </label>

    </ul>     
</div>    
</div>

在 Jquery 移动设备中放大复选框

Make checkbox larger in Jquery Mobile

css

jquery-mobile