Button Radios Widget: How to style it with CSS

Hi Johnathan, 

Given that I can apply the same logic, these look like they will be perfect for what I need! 

How can I adjust the button text / background to specific color I want (eg A "hex #" color)

Is there a way to adjust the height / width of these buttons as well?

Great news, thanks!!

You may add the CSS directly to the widget.

Here is a sample:

/* Button Background */
span {
background-color: #FFEB3B;
}
/* Button Border */
.wrapperButtonRadio {
border-color: #FFC107;
}
/* Button Width */
label {
width: 150px !important;
}
/* Button Height */
label {
height: 60px !important;
font: 700 15px/60px Lato, sans-serif !important;
}

Thank you.

Thanks Mike!

-And how would I change the text color?

-Is there a way to adjust the horizontal spacing of the buttons (eg margin from left side of page)

-A way to adjust spacing between the buttons themselves?

Is there a site I can use to look up this CSS code? (To not have to use your time) Looks pretty easy, just not sure which commands to use for which form elements. 

Thanks!

-And how would I change the text color?

/* COLOR */

.wrapperButtonRadio label span {
  color: white;
}

/* SELECTED OPTION COLOR */

.checkedButtonRadio + label span {
  color: red;
}

-Is there a way to adjust the horizontal spacing of the buttons (eg margin from left side of page)

You can adjust the margin by adding the following CSS to your form (not in the widget).

#id_96 {
  margin-left: 30px;
}

(How-to-Inject-Custom-CSS-Codes)

-A way to adjust spacing between the buttons themselves?

Add the following CSS to the Widget

.wrapperButtonRadio {
  margin-right: 15px;
}

Is there a site I can use to look up this CSS code? (To not have to use your time) Looks pretty easy, just not sure which commands to use for which form elements. 

Related Guides:

You will need to find the class name or the id of the element that you want to make changes to.

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/

Then, write some CSS for that element.

https://www.w3schools.com/css/

Thanks Adrian! 

The Hover Text for these radio buttons (Page 3) does not show up completely when I hover, and it gets cut off by the radio box - how can I fix this?

When I change the height of the  last three radio buttons (page 3), it leaves  weird mark at the bottom that wasn't there before, how can I get rid of this? How can I make the text in these last three radio buttons be in two rows (i.e. want what's in parenthesis "(  ) " in a second row)

Is there a way to get CSS code for these radio buttons to make my configurable list buttons look like / match them?

Thanks!

The Hover Text for these radio buttons (Page 3) does not show up completely when I hover, and it gets cut off by the radio box - how can I fix this?

You will need to change the elements width in order to display the text completely, you may use the code my colleague Mike provided above, I used the following, for example, and it worked: 

label {

width: 385px !important;

}   

When I change the height of the  last three radio buttons (page 3), it leaves  weird mark at the bottom that wasn't there before, how can I get rid of this?

I have increased the elements height and I only noticed the text duplicates, you may get rid of that injecting this code: 

label[for*="r"] span:nth-child(2) {

    display: none !important;

}

how can I get rid of this? How can I make the text in these last three radio buttons be in two rows (i.e. want what's in parenthesis "(  ) " in a second row)

I have been testing and unfortunately, it's not possible to display the text in a second row, it seems like the widget has been developed to automatically cut off the text if it exceeds the button. We may open a feature request for that if you want, let us know. 

Is there a way to get CSS code for these radio buttons to make my configurable list buttons look like / match them?

I can see you have already opened a thread about this, in order to avoid confusion, please kindly follow up this on the following link: https://www.jotform.com/answers/1524535 

Note: The CSS code provided here needs to be injected in each widget accordingly, this guide will help you injecting the code: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

Thanks. 

We will resolve the last question on its own thread here https://www.jotform.com/answers/1527393

Thank you.

Hi Kevin, 

Thank you