首页>>表单>>自定义漂亮的form表单选项 单选框 复选框 下拉菜单 radio checkbox select(2014-02-17)

自定义漂亮的form表单选项 单选框 复选框 下拉菜单 radio checkbox select

自定义漂亮的form表单选项 单选框 复选框 下拉菜单 radio checkbox select
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <p>A plugin to generate accessible custom forms: select, radio, checkbox.</p>  
  2. <form method="get" action="">  
  3. <fieldset>  
  4. <legend>Custom form</legend>  
  5. <p class="select-wrapper">  
  6. <label for="select">Select your option</label>  
  7. <br>  
  8. <select name="data[select]" class="cform">  
  9. <option value=""></option>  
  10. <option value="1">Option 1</option>  
  11. <option value="2">Option 2</option>  
  12. <option value="3">Option 3</option>  
  13. <option value="4">jQueryScript.Net</option>  
  14. <option value="5">Option 5</option>  
  15. <option value="6">Option 6</option>  
  16. <option value="7">Option 7</option>  
  17. <option value="8">Option 8</option>  
  18. <option value="9">Option 9</option>  
  19. <option value="10">Option 10</option>  
  20. </select>  
  21. </p>  
  22. <p>  
  23. <input type="radio" name="data[radio]" value="option1" id="option1" class="cform">  
  24. <label for="option1" class="lblr">Radio option 1</label>  
  25. </p>  
  26. <p>  
  27. <input type="radio" name="data[radio]" value="option2" id="option2" class="cform">  
  28. <label for="option2" class="lblr">Radio option 2</label>  
  29. </p>  
  30. <p>  
  31. <input type="checkbox" name="data[check]" value="female" id="optiona" class="cform">  
  32. <label for="optiona" class="lblr">A</label>  
  33. </p>  
  34. <p>  
  35. <input type="checkbox" name="data[check]" value="male" id="optionb" class="cform">  
  36. <label for="optionb" class="lblr">B</label>  
  37. </p>  
  38. </fieldset>  

 


原文地址:http://www.freejs.net/article_biaodan_269.html