jQuery 改变checkbox和radio select的样式-优快云博客

本文介绍如何使用jQuery库来改变网页中checkbox、radio按钮和下拉菜单的外观样式，提供具体的代码实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 改变checkbox和radio select的样式

   XML/HTML Code
  

   <div class="content">  
<h1>CHECKBOX</h1>  
<h3>Custom Checkbox Styling</h3>  
<!-- Custom Checkbox Styling -->  
<input type="checkbox" class="checkbox" checked />  
<h2>Code</h2>  
<code>$('.checkbox').checkBox();</code>  
<hr/>  
<h1>RADIO</h1>  
<h3>Custom Radio Button Styling</h3>  
<!-- Custom Radio Button Styling -->  
<input type="checkbox" class="checkbox" checked />  
<input type="radio" name="radio" class="radio" value="1" checked/>  
<input type="radio" name="radio" class="radio" value="2" />  
<input type="radio" name="radio" class="radio" value="3" />  
<h2>Code</h2>  
<code>$('.radio').radio();</code>  
<hr/>  
<h1>DROPDOWN</h1>  
<h3>Custom Select Dropdown</h3>  
<!-- Custom Select Dropdown -->  
<select class="select" name="select" tabindex="1">  
<option value="1">Click me and see</option>  
<option value="2">All the cool stuff</option>  
<option value="3">That I can do</option>  
<option value="4">I need a long phrase</option>  
<option value="5">In order to illustrate</option>  
<option value="6">How this element handles</option>  
<option value="7">Different text lengths</option>  
<option value="8">And long options lists</option>  
<option value="9">Because we are grown ups.</option>  
</select>  
 </div>  

  