Advertisement
krot

YII2 ActiveForm checkbox style

Jun 15th, 2018
297
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
PHP 2.15 KB | None | 0 0
  1.  <?php $checkboxTemplate = '<div class="form-group">{hint}{input}{beginLabel}{labelTitle}{endLabel}{error}</div>'; ?>
  2.  
  3. <?= $form->field($model, 'namePPP')->checkbox(['template' => $checkboxTemplate])->label('label'); ?>
  4.  
  5.  
  6. <style>
  7. [type="checkbox"] + label, [type="radio"] + label {
  8.     cursor: pointer;
  9.     line-height: 25px;
  10.     font-size: 1rem;
  11. }
  12. [type="checkbox"], [type="radio"] {
  13.     position: absolute;
  14.     left: -9999px;
  15.     visibility: hidden;
  16. }
  17. [type="checkbox"] + label, [type="radio"] + label {
  18.     position: relative;
  19.     padding-left: 30px;
  20.     cursor: pointer;
  21.     display: inline-block;
  22.     height: 25px;
  23.     line-height: 25px;
  24.     font-size: 1rem;
  25. }
  26. [type="checkbox"] + label, [type="radio"] + label {
  27.     position: relative;
  28.     padding-left: 30px;
  29.     cursor: pointer;
  30.     display: inline-block;
  31.     height: 25px;
  32.     line-height: 25px;
  33.     font-size: 1rem;
  34. }
  35. [type="checkbox"]:checked + label::before {
  36.     top: -4px;
  37.     left: -3px;
  38.     width: 12px;
  39.     height: 22px;
  40.     border-style: solid;
  41.     border-width: 2px;
  42.     border-color: transparent #299e0c #4285f4 transparent;
  43.     -webkit-transform: rotate(40deg);
  44.     -ms-transform: rotate(40deg);
  45.     transform: rotate(40deg);
  46.     -webkit-transform-origin: 100% 100%;
  47.     -ms-transform-origin: 100% 100%;
  48.     transform-origin: 100% 100%;
  49. }
  50. [type="checkbox"] + label::before {
  51.     content: "";
  52.     position: absolute;
  53.     top: 0;
  54.     left: 0;
  55.     width: 17px;
  56.     height: 17px;
  57.     z-index: 0;
  58.     border: 1.5px solid #8a8a8a;
  59.         border-top-width: 1.5px;
  60.         border-right-width: 1.5px;
  61.         border-bottom-width: 1.5px;
  62.         border-left-width: 1.5px;
  63.         border-top-style: solid;
  64.         border-right-style: solid;
  65.         border-bottom-style: solid;
  66.         border-left-style: solid;
  67.         border-top-color: rgb(138, 138, 138);
  68.         border-right-color: rgb(138, 138, 138);
  69.         border-bottom-color: rgb(138, 138, 138);
  70.         border-left-color: rgb(138, 138, 138);
  71.     -webkit-border-radius: 1px;
  72.     border-radius: 1px;
  73.     margin-top: 2px;
  74.     -webkit-transition: .2s;
  75.     -o-transition: .2s;
  76.     transition: .2s;
  77. }
  78. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement