What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Apply CSS style to matrix radio buttons?

    Asked by Kirofrb 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;}

    Page URL:
    http://form.jotformpro.com/form/41764334440956

    radio buttons style checkbox checkboxes size label
  • Profile Image
    JotForm Designer

    Answered by omer 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

    Answered by Kirofrb 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
    JotForm Support

    Answered by Welvin 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