Easter Sale 2025

  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!

TOPIC: styling standard RSForms radio buttons with CSS

styling standard RSForms radio buttons with CSS 4 years 4 months ago #40833

  • marc024
  • marc024's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
Hi,

I wanted to style the standard RSForms radio buttons with CSS... but it seems rather difficult (at least for me :) ).

I tried was was explained here
www.rsjoomla.com/forum/37-rsform-pro/237...diobutton.html#29168

But it does not work.

Actually, all I wanted to do was to change the color. It can be more, but just changing the color is enough for me...

Txs
The administrator has disabled public write access.

styling standard RSForms radio buttons with CSS 4 years 4 months ago #40835

  • dragos
  • dragos's Avatar
  • OFFLINE
  • Administrator
  • Posts: 634
  • Thank you received: 117
Hello,

Customizing the style of the Submit / Reset fields can be done using the designated CSS tab.

For example, if you are using the Responsive form layout, you can try using something similar:
<style>
 
.formResponsive button[type="submit"] {
    background-image: none;
    background-color: #_your_color_here;
    ...
}
 
.formResponsive button[type="reset"] {
    background-image: none;
    background-color: #_your_color_here;
    ...
}
 
</style>
The administrator has disabled public write access.
The following user(s) said Thank You: marc024

styling standard RSForms radio buttons with CSS 4 years 4 months ago #40836

  • marc024
  • marc024's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
Txs for the kind help.

But it is not the Submit/Reset button.
It is only the Radio buttons.

And I am in Bootstrap4 mode, if it changes anything.
The administrator has disabled public write access.

styling standard RSForms radio buttons with CSS 4 years 3 months ago #40848

  • marc024
  • marc024's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
So so.
RSForms was not willing to help unfortunately (even though in my eyes this is a basic/standard/universal need useful to all users, free and Pro).
Actually they told me that it was complex and that some javascript was needed.

So I investigated further myself.
Actually the reason why it was not straightforward for me is that
- the <input> is inside the <label>
- and the text of tha Label is not between <span>
so that most of the CSS that you can find out there would not fit our needs.
And my idea was not to change the HTML structure.

So eventually I came up with the following few lines of CSS... which
- work great on all browsers
- allow to customize the color
- allow to customize the size
- even change the cursor to "pointer" when hovering the Label or the Radio (which is even better than the native radio buttons...)

So please share / improve and give feedback ;)
/* pretty radio - see https://codepen.io/woluweb/pen/GRjOWba */
:root {
  --radio-color: rgb(171, 159, 181);
  --radio-color-light: rgba(171, 159, 181, 0.5);
}
label > input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
label > input[type="radio"]::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  border-style: solid;
  border-width: 0.2rem;
  border-color: var(--radio-color-light);
}
label > input[type="radio"]:checked::before {
  background: radial-gradient(var(--radio-color) 0%, var(--radio-color) 40%, transparent 50%, transparent);
  border-color: var(--radio-color);
}
input[type="radio"]:focus {
    outline: none; /* otherwise without the Text being inside <span> we have an outline on our 'custom radio button' */
}
label:hover, label > input[type="radio"]:hover {
  cursor: pointer;
}
 
The administrator has disabled public write access.

styling standard RSForms radio buttons with CSS 4 years 3 months ago #40849

  • gregs
  • gregs's Avatar
  • OFFLINE
  • Expert Boarder
  • Posts: 85
  • Thank you received: 5
1) Your original posting is in the forums that explicitly say are not monitored by RS staff...
2) Your posting - about RSForms - is posted in the "Templates" area of the site...
3) They offer a solution even though they were under no obligation to do so...
4) It did not meet your needs because your situation is complex...

Then you call them out for not being "willing to help?" That doesn't seem very fair to them.

I've found RSJoomla to be very responsive to support requests when submitting tickets to them. Then again, I'm more than happy to pay for the ongoing support which is important (to me) for mission critical software. You have the option to do so and I suspect your issue would be quickly resolved.
Last Edit: 4 years 3 months ago by gregs.
The administrator has disabled public write access.

styling standard RSForms radio buttons with CSS 4 years 3 months ago #40850

  • marc024
  • marc024's Avatar
  • OFFLINE
  • Fresh Boarder
  • Posts: 4
Hi @Gregs

Txs for your personal opinion.
I am happy for you if you are happy or RSForms' services :)

But still my own experience is not that good so far (100% bad experience with the support out of 1 experience. So it can only improve in the future ;) ).

To reply to your 4 points :
1) I am not speaking of the reply on the Forum : I have a Pro licence and contacted their Support
2) Indeed. I must have messed up with the category of the post on the forum. But anyway, I was speaking about their Support (and not about the Forum)
3) No, precisely: they did not offer any solution! Their reply was simply that they don't "offer customization". OK, I am not asking them to build my own forms, right. That would not be fair. I was just asking the CSS to customize radio buttons / checkboxes. Their answer was also to say that it could only be achieved with javascript. Well, obviously not since even as a newbee in RSForms I could write the CSS above :)
4) my situation is not complex : it is basic. Anybody would want to change the color of the radio buttons or checkboxes. It is quite generic (and could even be a parameter in the Field itself actually. But I guess they prefer to push selling the Advanced Custom Fields plugin).

For the rest, I do agree that their Support was very reactive (even if it was to say that they did not want to help me with that).

Anyway, personally I was happy to share the solution so that others can benefit from it.
That's the meaning of a Community ;)
The administrator has disabled public write access.
  • 1

Read this first!

We do not monitor these forums. The forum is provided to exchange information and experience with other users ONLY. Forum responses are not guaranteed.

However, please submit a ticket if you have an active subscription and wish to receive support. Our ticketing system is the only way of getting in touch with RSJoomla! and receiving the official RSJoomla! Customer Support.

For more information, the Support Policy is located here.

Thank you!