Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Custom Style Radio Button Border

  • cheeseburger
  • cheeseburger's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
1 day 12 hours ago - 1 day 12 hours ago #271326 by cheeseburger
Custom Style Radio Button Border was created by cheeseburger
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.15.5+250724 
Own server or LimeSurvey hosting: Own server
Survey theme/template: Vanilla extended into our custom theme
==================
Hi. We would like to take the existing radio button style and make it's border darker. When inspected, we see the hierarchy of styles it is appearing to use, but cannot find the access point to modify the border. If we recall, the actual radio buttons are hidden underneath proxy buttons that are placed over top. We cannot access the style for these either. We did search the forums, youtube, etc and finally reached a point where we thought we should ask the group. 

The question type being used is: List (radio) (Type: L)

Thank you for any help.
 
Last edit: 1 day 12 hours ago by cheeseburger.

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
21 hours 41 minutes ago #271332 by Joffm
Replied by Joffm on topic Custom Style Radio Button Border
Hi,
only the border?
To set the border of all radio buttons use this (best you add it to your "custom.css")
Code:
<style type="text/css">
    .radio-item label::before {
        border-color: black;
    }
</style>
If you want to set each single radio button 
Code:
<style type="text/css">
    .radio-item:nth-child(1) label::before {
        border-color: black;
    }
    .radio-item:nth-child(2) label::before {
        border: 2px solid black;
    }
    .radio-item:nth-child(3) label::before {
        border-color: red;
    }
</style>


Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

  • cheeseburger
  • cheeseburger's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
18 hours 14 minutes ago #271341 by cheeseburger
Replied by cheeseburger on topic Custom Style Radio Button Border
Wow, Joffm, I really appreciate this one. It worked perfectly and I will now analyze the structure to better understand WHY this works. Thank you so much for your time! 

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
12 hours 8 minutes ago - 12 hours 2 minutes ago #271346 by tpartner
Replied by tpartner on topic Custom Style Radio Button Border
The ::before pseudo element applied to the label is used as the radio border.

The ::after pseudo element applied to the label is used as the radio dot.

The actual radio input is hidden so you only see the pseudo elements.

The appearance of the pseudo elements can be modified according to the :checked property of the radio input.

- www.w3schools.com/css/css_pseudo_elements.asp
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 12 hours 2 minutes ago by tpartner.

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source