使Jquery Mobile中的复选框更大 [英] Make checkbox larger in Jquery Mobile

问题描述

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

Trying to make the checkbox larger in Jquery Mobile page. Nothing I seem to do will override the default CSS in the style page for mobile 1.2.0.css - The following is my fiddle of working code, but unable to make larger. I have tried .ul-checkbox set to 40px but no change

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>

推荐答案

感谢Alex Char的修复，最后的问题在这里是多个复选框的主动提示：css需要添加z-index：2;以应用于顶层复选框并从标签元素中删除id。

Thanks to Alex Char for the fix, to clarify my final issue here was the resolution to the multiple check boxes unsolicited: The css needed to add z-index: 2; to apply to top layer checkbox and remove id from the label elements. Cleaned up extra code by removing extra label tags not needed.

<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中的复选框更大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！