Apply CSS style to matrix radio buttons?

  • Profile Image
    Kirofrb
    Asked on June 26, 2014 at 09:30 AM

    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;}

  • Profile Image
    omer
    Answered on June 26, 2014 at 10:04 AM

    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.

  • Profile Image
    Kirofrb
    Answered on June 26, 2014 at 12:36 PM

    I would love some input!

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

  • Profile Image
    Welvin
    Answered on June 26, 2014 at 01:46 PM

    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