Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Styling radio elements as checkboxes and vice versa

More
6 years 5 months ago #182609 by tpartner
Replied by tpartner on topic Styling radio elements as checkboxes and vice versa

So, I was asked to change radio buttons to checkboxes buttons for design consistency. But it doesn't look nice with CSS.

Add something like this to the question source - this will allow you to pick up most of the core style rules for the check-boxes.

(the styles could be placed in custom.css instead of in the question source)

Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    $('#question{QID}').addClass('with-checkboxes');
    $('#question{QID} .radio-item').removeClass('radio-item').addClass('checkbox-item');
  });  
</script>
<style type="text/css">
  .list-radio.with-checkboxes .checkbox-item {
    padding-left: 3px;
  }
  .list-radio.with-checkboxes .checkbox-item input[type="radio"]:indeterminate + label::after {
    display: none;
  }
</style>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: krosser
The topic has been locked.
More
6 years 5 months ago #182620 by krosser
Replied by krosser on topic Styling radio elements as checkboxes and vice versa
This works nicely, Tony. Many thanks!
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source