css - 在 Jquery Mobile 中使复选框变大

Question

试图使 Jquery Mobile 页面中的复选框变大。我似乎所做的一切都不会覆盖移动 1.2.0.css 样式页面中的默认 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