What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Change colours of check box tick in Checklist widget

    Asked by sixtowns on June 09, 2015 at 04:54 AM

    Hello,

     

    How do I change colour of the tick?

    Page URL:
    http://form.jotformeu.com/form/51562522847357

    colour checklist widget
  • Profile Image
    JotForm Designer

    Answered by ibrahim on June 09, 2015 at 06:47 AM

    Hi,

    Which color would you want to change? Can i take the color's hex code? 

    Thanks

  • Profile Image

    Answered by sixtowns on June 09, 2015 at 06:55 AM

    I want to change the green ticks?, i dont know where to find the hex code for the tick.

  • Profile Image
    JotForm Designer

    Answered by ibrahim on June 09, 2015 at 07:52 AM

    Hi,

    Some of the widgets are placed in an iframe container and injecting CSS codes within your form does not affect the widgets.

    When I checked the widget you use, this request not possible.

    Thank you.

     

  • Profile Image
    JotForm Designer

    Answered by ibrahim on June 09, 2015 at 08:07 AM

    Ahhh, i get it now :) I apologize for the misunderstanding. This is solution ...

    1. When you add the checklist widget:

    2. You can inject CSS code.

    For example, this code change to purple:

    .checklist li label:after {

    content: '';

    width: 2.25em;

    height: 2.25em;

    position: absolute;

    top: .25em;

    left: .25em;

    display: none;

    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1REFENzI3OTA2QkExMUU1OUJFQ0ZDOEU0OUJDNjlFRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1REFENzI3QTA2QkExMUU1OUJFQ0ZDOEU0OUJDNjlFRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVEQUQ3Mjc3MDZCQTExRTU5QkVDRkM4RTQ5QkM2OUVGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVEQUQ3Mjc4MDZCQTExRTU5QkVDRkM4RTQ5QkM2OUVGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+6tnWjQAAAZhJREFUeNpi/P//P8NgAUwMgwiMOmbUMaOOoRZgoaXhd/mmgMxfAsSaQOyt/CnnCT71jLQq9IAO4QZSq4HYEyoEcogz0EG36OoYqEN2ALENmtQbIPYCOug0XdIM0CGiQOoYFoeAgAgQb6VLmgE6RAZI7QNiVRxK/gJxOs0dA3SIGpDaC8QyOJR8AeJAYBTtITtrAy2pA+JAAmpMgdRRAg5xwucQvAkYKVuGQ4M3GWjYQhwOAUUNDw47XoPSD75chDdkoLlhE9QhIMAMxAuA4oVo6lwIOOQJsQ7BF007kMoHZNAHijaoQwKh6nA55DYQWxLrEHwJ+CkePY1Ah7iCLIKGGDZwCYhdgA55TY26KQaI5+LRZ4PHIUeA2IpUhxAsgYEh0AOkikkwbzsQhwId8pXqtTbQ0BIgVU+kWSuB2I9chxBdNwFDKAdITcajBBSlGUCH/KGk4CS6ogQ6KB5qKXpa6YWGIMWApFobmp1XIzmoHuiQJmpVKSQ3IaAF3XogrgQ6ZAo1K1rG0R7lqGNGHTPqmJHkGIAAAwAonpNlbNOtDQAAAABJRU5ErkJggg==') center center no-repeat transparent !important;

    }

    or you can say which color you want.

     

  • Profile Image

    Answered by sixtowns on June 09, 2015 at 11:27 AM

    I can’t see which text has turned purple?

  • Profile Image
    JotForm Support

    Answered by BJoanna on June 09, 2015 at 12:58 PM

    Sorry for misunderstanding but like my colleague already stated in one of comments from the start of this conversation some of the widgets are placed in an iframe container and injecting CSS codes within your form does not affect the widgets. One of widget is this widget you are using. Injecting custom CSS is not possible in this widget and if you are trying to override CSS of that widget with custom CSS it will not work. Because of that you do not see purple changes. 

    One more time sorry for this misunderstanding but on this widget you can not change color of checkbox tick. 

    Widgets are specific because they are loaded by JS and Java Script code is not possible to be overwritten with custom CSS.

  • Profile Image

    Answered by sixtowns on June 09, 2015 at 01:03 PM

    ok, thanks