I love your library and spent most of today implementing it :)

That being said there is one aspect I can't seem to figure out. When disabling a checkbox I only want the checkbox, , to gray out, but not the rest of the label.

Is there a way to do this? If not is it possible for it to simply have none of it gray out?

Update Answer

Go figure as soon as I post this I come up with the answer ;)

The following CSS removes the gray completely, however it would be nice if the checkbox portion was still grayed out.

input:disabled+label{
opacity : 1 !important;
filter : alpha(opacity=1) !important; /* IE<9 */
}

The following CSS removes the gray from just the tag, and keeps the rest of the label normal

why pretty is by default inline-block?

I have spent several hours trying to make pretty checkbox with multiple lines of text in label, but no success... This was not planned from the beginning or am I wrong?

Reproduction: https://jsfiddle.net/guanzo/76xesvct/12/

The 2 checkboxes are exactly the same, except the first one is using .p-icon and .icon, while the second one is using .p-svg and .svg.

I believe the problem is here:

It needs to be

input[type='checkbox']:indeterminate ~.state.p-is-indeterminate {
    display: block;

    .icon, .svg {
      display: block;
      opacity: 1;
    }
  }

The default checkbox/radio button shows/hides a border around the control when you tab in and out of it. Pretty-checkbox controls doesn't show this, so I have no idea which control has the focus. Is there a way to enable this?

I'm using it with vue js and i'm not able to use it with any other libraries, for example vue validate.

• Adding a validator doesn't work
• If i add an anchor on the label i'm also not able to attach any events to these...

Doesn't seem to work with Foundation 6

Checkboxes are not aligned with label.

I'm having problems with this when using UIKIT icon library (https://getuikit.com/docs/icon).

• The icon inside the checkbox doesn't disappears when I click on it.
• The colors (success, etc) overlap the icons.
• The outline colors only affect the box borders, not with the icons colors. They don´t change color at all.

Can you help me ?
Thanks. Great job.

I have been trying to get the checkboxes to work with react-icons which uses SVGs

This is my code:

<div className="pretty p-svg p-curve">
    <input type="checkbox" />
    <div className="state p-success">
      <FaCheck />
      <label>Recurring</label>
    </div>
  </div>

but it's not working, is it compatible?

I've checked in both Safari and Chrome.. checkboxes aren't showing. Not sure why... I've imported at the top of my index.html page (<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/pretty-checkbox.min.css"/>).

I'm using vue but I don't see why that would affect it...

<div class="pretty p-switch">
<input type="checkbox" id="checkbox" v-model="item.enabled" v-on:change="change_active(item)">
</div>
<div class="state">
<label>Check</label>
</div>

I tried the following:

<div class="pretty p-icon p-has-indeterminate"> <input formControlName="checked" [indeterminate]="isIndeterminate" type="checkbox" /> <div class="state p-primary"> <i class="icon fa fa-check"></i> <label>{{item[field]}}</label> </div> <div class="state p-primary p-is-indeterminate"> <i class="icon fa fa-minus"></i> <label>{{item[field]}}</label> </div> </div>

It only works for the regular checkbox. The indeterminate remains default.

The library seems not to work with the official Google Material Icons from here: https://material.io/icons/.

I imported pretty.css with the following link:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pretty-checkbox/2.2.0/pretty.min.css"/>

My markup is as follow:

<div class="pretty">
        <label for="isSSL"><i class="material-icons">done</i> labeltext</label>
        <input type="checkbox" name="isSSL" />
</div>

Under customize, you have mentioned we can change the default colors. But where and how? I am using your library as part of a Vue.js project. I have imported your scss stylesheet. But overwriting the scss style in the local code is not changing the color. Please help.

Does this package support rtl format?

Using the class .p-bigger on .p-switch, the switch handle is a bit off.

I have installed the npm and I cannot include the style because my extension is css, not scss.

In index.html how to include this.

I am using your checkboxes and the feedback is that the animation is too slow and is not giving a good UX. Is there a way to speed up the animation by changing the transition time or transition delay? Please let me know.

Any idea why this is? I get a � instead of the checkbox on Safari, Firefox and Chrome on my Mac.

Trying to have label on left and radio input on right. Any help is much appreciated. Thanks for the great library.

I've set up the base value of font in the body is 16px. While referring your code and I've found that you have assigned 14px for the base value in the body tag. When I've changed it to 16px it's get distracted.
See the example given below.

The checkbox doesn't seem to align correctly no matter where I put it in the document.
I managed to make it align by writing some messy css around it but I really don't like that solution.

Here is an image for reference: https://imgur.com/yuVtiMX

I have a lot of checkbox who are checked on startup. It is posibble to turn off animation during startup?

example: https://jsfiddle.net/ShutDown/3d9hfmdq/3/

Is there a way to toggle through three options?

Here is my HTML

<div class="pretty plain toggle">
                  <input type="checkbox"/> 
                  <label><i class="mdi mdi-thumb-up success"></i> PM</label>
                  <label><i class="mdi mdi-thumb-up success"></i> Planned WO</label>
                  <label><i class="mdi mdi-thumb-down danger"></i> Unplanned WO</label>
</div>

<link href="js/pretty-checkbox/3.0/pretty-checkbox.min.css" rel="stylesheet" />

   <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state">
            <label>Check</label>
        </div>
    </div>

I not see worked. No reaction. Only not unresponsive rectangle. I am check in browser css was loaded and linked to element.

I saw that you're working on a new version right now. Therefore I won't file a PR which might collide with your work but add this so that others might benefit from it and you might add this in the new version:

In the current version of the package, the background color can't be changed via a variable.

Perhaps you want to expose the following so it can be modified! Here I change the background-color of the checkbox to lightgrey:

.pretty .state label:before {
      background-color: lightgrey;
}

So I was creating a form and the mock called for a checkbox similar to what was available in your library (which by the way is awesome).

But when I tested it on my phone, the icons on the icon checkboxes will disappear when checked. This also happens on the github page for the library.

Was wondering if there is anything I can do to help.

This is the mark up

<div class="pretty p-icon p-plain p-smooth">
    <input type="checkbox" name="placeholders[]" value="[[+placeholder]]"  class="collapse-switch">
    <div class="state p-primary-o">
        <i class="icon fa fa-check"></i>
        <label>[[+placeholder]]</label>
    </div>
</div>

I can add screenshots or screen recordings as well

Apparently, there is a way to make a checkbox "invert colors" when hovering over it, but this works only when the checkbox is in the "checked" state:

                <div class="pretty p-icon p-fill p-bigger p-has-focus p-has-hover">
                    <input type="checkbox">
                    <div class="state p-primary">
                        <i class="icon fa fa-check"></i>
                        <label>Remember Me</label>
                    </div>
                    <div class="state p-primary-o p-is-hover">
                        <i class="icon fa fa-check"></i>
                        <label>Remember Me</label>
                    </div>
                </div>

I would like to achieve something similar, but also when the checkbox is in the "unchecked" state.

Also: it would be nice if this would be possible without having to repeat the icon and label.

Thank you @lokesh-coder - great tool!

Is there a way to get it to pulse on every click? I tried moving p-pulse from the parent class to the state, but it doesn't work...

            <div class="pretty p-icon p-round p-toggle ">
              <input type="checkbox" />
              <div class="state p-info p-on **p-pulse**">
                <i class="icon fa fa-arrow-down"></i>
                <label>Descending</label>
              </div>
              <div class="state p-info p-off **p-pulse**">
                <i class="icon  fa fa-arrow-up"></i>
                <label>Ascending</label>
              </div>
            </div>

I'm trying to use this awesome work but checkboxes are not displaying on chrome u.u please help.
Chrome

Edge

I already tried adding: -webkit-appearance: none; or -webkit-appearance: checkbox; to input[type="checkbox"] css tag

https://imgur.com/a/pdp1g

One of these checkboxes has added padding but the checkbox does not align properly. How do I make the area bigger without ruining it?

I've got 3 radio buttons with different IDs, and I'm unable to detect any changes or clicks by calling the functions below:

$('input#radio-id').on('click', function() { console.log('hi') });

or

$('input#radio-id').on('change'), function() { console.log('hi') });

How do I detect a change using jQuery?

Thanks.

The items toggle on and off visually but it doesn't change the state of the checkbox why and how do we achieve that?

I am trying to get the following effects:

• change the checkbox outline color upon hover (unselected).
• Add background color to checkbox upon hover (selected).

However, when I apply CSS styles (like, outline and background color) to the tag, even at the inline level, it is not working. It looks like the library is preventing this from happening. But I need to bring in these effects. Please tell me if this is possible from within your library.

Hello,

I see that master allows you to override colors but the latest version in npm (2.0.2) does not.

Any chance this change could be pushed up?

Love your work by the way. Thanks!

Very good library.

I have a simple question: how to create a simple solid-colored radio, such as this:

Attempting to use FA won't work because the icon is inverted (color), so I'm not sure how best to proceed using this library.

Thanks

Hi,

sometimes I need to have a very long label and it becomes unusable with white-space: nowrap;

Is there any workaround?

Regards,
Piotr

I saw that you're working on a new version right now. Therefore I won't file a PR which might collide with your work but add this so that others might benefit from it and you might add this in the new version:

If you have a label with links (<a> tags) in it, they won't be clickable when using your package, even if you raise the z-index for these links.

To solve this (i.e. for the links to be clickable) I had to restrict the width of the input element, i.e.

.pretty input {
	max-width: 20px
}

I used 20px, but this should of course depend on the size of the checkbox you may choose.

like bootstrap，xs , sm , lg ...

Suggest that white-space: nowrap; is removed from the .pretty class as this can cause layout breakages depending on length of label and form width size.

An example being an opt in to a newsletter or terms and conditions that might have a longer phrase than a simple one/two word option.

I appreciate this might cause other layout issues that might beed to be resolved. Perhaps flex layout now it is widely supported?

I really like these pretty checkbox/radio buttons.
I am wondering if I were to have multiple checkboxes with the proper markup, what would an external button need to look for to toggle a Select All function?

For example:
HTML

<div class="container">
     <div class="pretty p-curve p-smooth p-bigger">
          <input type="checkbox" name="updateFlags['${status.count}']" value="true">
          <div class="state p-success">
               <label>Checkbox A</label>
          </div>
     </div>

     <div class="pretty p-curve p-smooth p-bigger">
          <input type="checkbox" name="updateFlags['${status.count}']" value="true">
          <div class="state p-success">
               <label>Checkbox B</label>
          </div>
     </div>

     <div class="pretty p-curve p-smooth p-bigger">
          <input type="checkbox" name="updateFlags['${status.count}']" value="true">
          <div class="state p-success">
               <label>Checkbox C</label>
          </div>
     </div>

     <div class="pretty p-curve p-smooth p-bigger">
          <input type="checkbox" name="updateFlags['${status.count}']" value="true">
          <div class="state p-success">
               <label>Checkbox D</label>
          </div>
     </div>
</div>
<button type="button" id="selectAll">Select All</button>

JS:

$("#selectAll").on('click', function(){
     $(".container input[type='checkbox']").prop('checked', $(this).prop('checked'));
});

Clicking the button does nothing in this instance.

Hi, I'm using a link into the markup, like so:

     <div class="pretty p-default p-curve">
                        <input type="checkbox" />
                        <div class="state ">
                            <label>
                                <a href="#">Paris</a>
                            </label>
                        </div>
      </div>

The only problem I have is that when I hover the link, the css hover event doesn't seem to fire.
So my css rule doesn't work:

a:hover{
     text-decoration: underline;
}

Can I fix it using css only?
(I suppose I could find a workaround with js, but I'm interested to know if a css only solution
has been found already)

Thank you for the excellent package. In the documentation under the the lock option there a minor typo:

...To lock, add class p-lock to .pretty

where I beleive it should be: To lock, add class p-locked to .pretty

Thanks for this awesome library, exactly what I was looking for!

I was wondering, is there any reason why .pretty has margin set?

Hi,

I was wondering if it is possible to separate the color options based on fill and stroke attributes of SVG icons. As of now the five color options (like p-success and p-success-o) use the color and stroke attributes.

So besides having only having classes like:

.p-success {
    color: <value>;
    stroke: <value>;
}

Also have classes for:

.p-fill-success {
    color: <value>;
    fill: <value>;
}

Cheers, Wout

Hi,

first, thanks for the nice lib! =)

On the basic square checkbox, the pretty class provides a z-index of 999 on the inner label's ::before. Is there a specific reason for this?

Actually, it requires us to implement the z-index property of a lot of elements to be at least 1000 because the boxes would shine through otherwise.

The Google Material Design Icons in pretty-checkbox aren't compatible with IE 11 and display as large square boxes.

https://lokesh-coder.github.io/pretty-checkbox/

Sometime I want to lock the checkbox/radio, and don't to change the color.

disabled will change color.

Is there any plan to add feature for lock ?

If the input is disabled it doesn't change the opacity.

https://jsfiddle.net/2j5gx35j/11/

When working with Select2 , if dropdown list of select2 cover pretty-checkbox, after click select2 item, will also cause pretty-checkbox seleted.

May this two css rules is the reason:

z-index: 99999999;: https://github.com/lokesh-coder/pretty-checkbox/blob/master/src/pretty.css#L63

opacity: 0;: https://github.com/lokesh-coder/pretty-checkbox/blob/master/src/pretty.css#L71

I included the cdn link to my project where I am using bootstrap 3 and fontawesome. But it did not work as expected. While digging to your page html code I could see this library does not function properly if there is not included this link <link rel="stylesheet" href="https://cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css"/>. Is this mandatory to include this link to my project or there is something else to do in order to use only fontawesome icons ?