Apply CSS style to matrix radio buttons?

Hi

I've tried injecting code into my form in order to make checkboxes and radiobuttons look like push buttons, and it works perfectly, but it doesn't apply to my matrix.

Any ideas to add the same styling to a matrix?

Here's a link to an example form with the code injected: http://form.jotformpro.com/form/41764334440956

And here's the code:

.form-matrix-values{

width:50px !important;

}

input[type=text] {

height: 26px!important;

font-size: 16px !important;

border: 1px solid #c4c4c4;

height: 26px;

font-size: 16px;

padding: 4px 4px 4px 4px;

border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

box-shadow: 0px 0px 8px #d9d9d9;

-moz-box-shadow: 0px 0px 8px #d9d9d9;

-webkit-box-shadow: 0px 0px 8px #d9d9d9;

}input[type=radio], input[type=checkbox] {

display:none;

}

input[type=radio] + label, input[type=checkbox] + label {

display:inline-block;

margin: -2px;

padding: 4px 12px;

margin-bottom: 0;

font-size: 16px;

line-height: 26px;

min-width: 26px;

color: #333;

text-align: center;

text-shadow: 0 1px 1px rgba(255,255,255,0.75);

vertical-align: middle;

cursor: pointer;

background-color: #f5f5f5;

background-image: -moz-linear-gradient(top,#fff,#e6e6e6);

background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));

background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);

background-image: -o-linear-gradient(top,#fff,#e6e6e6);

background-image: linear-gradient(to bottom,#fff,#e6e6e6);

background-repeat: repeat-x;

border: 1px solid #ccc;

border-color: #e6e6e6 #e6e6e6 #bfbfbf;

border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);

border-bottom-color: #b3b3b3;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);

filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);

-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);

box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);

}

input[type=radio]:checked + label,input[type=checkbox]:checked + label{

background-image: none;

outline: 0;

-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);

-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);

box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);

background-color:#e0e0e0;

}

.form-multiple-column .form-radio-item, .form-multiple-column .form-checkbox-item{width: auto;}

Hi Kirofrb,

In matrix, there is no label elements that are following radio buttons and checkboxes, so unfortunately you can't stylize radio buttons/checkboxes in matrixes using same way.

I suggest you don't use matrix if you want to use chechboxes and radio buttons with this style. Instead of using matrix, you can use simulate matrix appearance using inject css.

If you need any further information, please let us know. 

Have a good day.

I would love some input!

So you mean like setting up single/multi-choice up in a table?

I think Omer means that you will use the same format of the radio button with labels. So instead of a whole matrix table, use a single radio button field. This way, you can apply your current style.

Thanks