Question

尝试在Jquery Mobile页面中使复选框变大。我似乎没有做什么会覆盖移动1.2.0.css样式页面中的默认CSS - 以下是我的工作代码的小提琴，但无法做大。我试过.ul-checkbox设置为40px但没有变化

<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的修复，澄清我最后的问题是解决了多个复选框未经请求的问题：需要添加z-index的css：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 Mobile中使复选框更大

2 个答案: