Checkbox customization

  • Pascal Kurmann
  • Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 86
  • Thank you received: 0

Pascal Kurmann created the topic: Checkbox customization

Hello

Is it possible to customize the checkboxes?

Regards
Colette
#234769
  • Posts: 2282
  • Karma: 84
  • Thank you received: 306

mihaela replied the topic: Checkbox customization

Hello,

Please explain how you would like to customize the checkboxes?

Regards,

Mihaela
#234770
  • Pascal Kurmann
  • Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 86
  • Thank you received: 0

Pascal Kurmann replied the topic: Checkbox customization

Hi Miheala

I would like to make them bigger and with crosses instead of checkmarks.
And also not with round corners.

Thanks
#234772
  • Posts: 2282
  • Karma: 84
  • Thank you received: 306

mihaela replied the topic: Checkbox customization

Hello again,

Here is how to make change to the styling of checkboxes.

Navigate to form's Advanced properties > More options > Form pieces and in Before Form section set Type to Custom.

In the code area below put code similar to this one:
echo '
<style>
input[type="checkbox"]:after {
    width: 15px !important;
    height: 15px !important;
    top: -2px !important;
    left: -1px !important;
    position: relative !important;
    background-color: #f6f6f6 !important;
    content: "" ;
    display: inline-block !important;
    visibility: visible !important;
    border: 1px solid white !important;
}

input[type="checkbox"]:checked:after {
    width: 15px !important;
    height: 15px !important;
    position: relative !important;
    top: -2px !important;
    left: -1px !important;
    background-color: #f6f6f6 !important;
    content: "X" !important;
    display: inline-block !important;
    visibility: visible !important;
    border: 1px solid white !important;
}
</style>';

You can add here the styling that you want.

Let me know whether you have managed to set this for your form.

Regards,

Mihaela
#234776
  • Pascal Kurmann
  • Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 86
  • Thank you received: 0

Pascal Kurmann replied the topic: Checkbox customization

Hello Mihaela

It doesn't work, only the size seems to be chancing without the ":after". Also the checkbox gets blurry. Is there a way to replace the box completly with a custom image?
redesign.lifestyle-immobilien.ch/immobil...che-eigentumswohnung
#234777
  • Pascal Kurmann
  • Topic Author
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 86
  • Thank you received: 0

Pascal Kurmann replied the topic: Checkbox customization

Hello Mihaela

It doesn't work. Only the size works (without the ":after" in the code) but it gets blurry. Is there a way to replace the checkbox with a custom image?

Regards, Colette
#234778
Moderators: ForumSupporttomeperica
Time to create page: 0.054 seconds

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here

News and Updates

Get informed about new downloads, updates and more in our News and Updates newsletter.

All Extensions Subscription

Get 1 year access to all of our current and future products and 1 year of professional support -- 99€

No support per domain or website installation limits! Includes all of our current and future Joomla!® extensions, Joomla!® templates for the duration of your membership. This means, by purchasing an All Extensions Subscription you'll have it all covered!

Get it from here

3rd Party Discount - 25% Off

We help you to keep your costs under control. If you are a new member and purchased a form building tool from a different form vendor, then you'll get a 25% discount on our subscription plans.

How to receive the discount:

Send us a quick email to sales@crosstec.org with a proof of purchase (for example a paypal receipt), await payment instructions and enjoy your membership!

Community Reward

Help us to create new extensions and plugins! With only $5 you help us a lot and get unlimited download access to all of our products, professional support and even more. Get your reward now!

Read More Here