ionic之样式复选框

桃扇骨 2022-07-15 14:49 349阅读 0赞

1、实例背景

  1.  ionic复选框用的是checkbox，checkbox有各种各样的样式

2、实例源码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  6.         <title>ionic之样式复选框</title>
  7.         <link rel="stylesheet" href="../css/ionic.css" />
  8.         <script type="text/javascript" src="../js/ionic.bundle.js" ></script>
  9.     </head>
  10.     <body ng-app="calmApp" ng-controller="calmController">
  11.         <div class="content has-header">
  12.             <ul class="list">
  13.                 <li class="item item-checkbox">
  14.                     <label class="checkbox">
  15.                         <input type="checkbox" />
  16.                     </label>
  17.                     一月
  18.                 </li>
  19.                 <li class="item item-checkbox">
  20.                     <label class="checkbox checkbox-assertive">
  21.                         <input type="checkbox" />
  22.                     </label>
  23.                     二月
  24.                 </li>
  25.                 <li class="item item-checkbox">
  26.                     <label class="checkbox checkbox-balanced">
  27.                         <input type="checkbox" />
  28.                     </label>
  29.                     三月
  30.                 </li>
  31.                 <li class="item item-checkbox">
  32.                     <label class="checkbox checkbox-calm">
  33.                         <input type="checkbox" />
  34.                     </label>
  35.                     四月
  36.                 </li>
  37.                 <li class="item item-checkbox">
  38.                     <label class="checkbox checkbox-dark">
  39.                         <input type="checkbox" />
  40.                     </label>
  41.                     五月
  42.                 </li>
  43.                 <li class="item item-checkbox">
  44.                     <label class="checkbox checkbox-energized">
  45.                         <input type="checkbox" />
  46.                     </label>
  47.                     六月
  48.                 </li>
  49.                 <li class="item item-checkbox">
  50.                     <label class="checkbox checkbox-light">
  51.                         <input type="checkbox" />
  52.                     </label>
  53.                     七月
  54.                 </li>
  55.                 <li class="item item-checkbox">
  56.                     <label class="checkbox checkbox-platform">
  57.                         <input type="checkbox" />
  58.                     </label>
  59.                     八月
  60.                 </li>
  61.                 <li class="item item-checkbox">
  62.                     <label class="checkbox checkbox-positive">
  63.                         <input type="checkbox" />
  64.                     </label>
  65.                     九月
  66.                 </li>
  67.                 <li class="item item-checkbox">
  68.                     <label class="checkbox checkbox-royal">
  69.                         <input type="checkbox" />
  70.                     </label>
  71.                     十月
  72.                 </li>
  73.                 <li class="item item-checkbox">
  74.                     <label class="checkbox checkbox-square">
  75.                         <input type="checkbox" />
  76.                     </label>
  77.                     十一月
  78.                 </li>
  79.                 <li class="item item-checkbox">
  80.                     <label class="checkbox checkbox-stable">
  81.                         <input type="checkbox" />
  82.                     </label>
  83.                     十二月
  84.                 </li>
  85.                 <li class="item item-checkbox">
  86.                     <label class="checkbox checkbox-stable">
  87.                         <input type="checkbox" />
  88.                     </label>
  89.                     十二月
  90.                 </li>
  91.             </ul>
  92.         </div>
  93.     </body>
  94. </html>

3、实例结果

![Image 1][]

[Image 1]:

发表评论

表情：
评论列表 （有 0 条评论，349人围观）

还没有评论，来说两句吧...

相关阅读

    相关 仿复选框样式

    相信大家在看到很多炫酷的网页时总会看到样式很棒的复选框，于是 脑补下代码“input\[‘type=”checkbox”’\]:padding:10px;border:1px

    梦里梦外;梦里梦外;/ 0 赞/ 359 阅读

    相关 伪类复选框改变样式

    大家在开发的过程中，肯定都用过复选框，那么大家有没有为了改变样式而烦恼过？ 这里给大家介绍特别简单的一种方式。 话不多说，上代码。 <!DOCTYPE html>

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 503 阅读