Css 在Jquery Mobile中使复选框变大

正在尝试在Jquery移动页面中使复选框变大。我似乎没有做任何事情会覆盖mobile 1.2.0.CSS样式页中的默认CSS-下面是我的工作代码，但无法进行更大的修改。我已尝试将.ul复选框设置为40px，但没有更改

关键绩效指标


评估心脏危险因素
年龄
糖尿病


无名氏

您可以使用：

#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;
}

参考文献：

---

多亏了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>

关键绩效指标

评估心脏危险因素
年龄
糖尿病

我没有看到变化吗？-我的提琴上还有一个不应该出现的复选框？你说有一个不应该出现的复选框是什么意思？这是你的html。另外，根据Jquery Mobile中的OP Make checkbox bigger，这就是代码所做的。真的不明白你的意思。这是OP中的html（您有重复的id，这也是错误的）。这段代码增加了复选框的大小。看看小提琴的例子，有3个复选框，我的代码只有一个2@BarclayVision看小提琴中的html有两个复选框。您可能将

span

元素称为复选框？

<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>