Form Designer Tool: "Other" checkbox when "Allow Other" is enabled does not match the styling of the other regular check boxes

I want to make my Other checkboxes where users can input text to match the regular, larger checkboxes above them. How can I do this?

 

You will need to apply custom CSS in order to align and match the "other" checkboxes to the regular options.

Please try injecting this custom CSS and check if this will work for you.

.form-checkbox-other {
vertical-align: middle;
margin-right: 1px !important;
margin-left: 4px !important;
margin-top: 0px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
left: 4px;
width: 18px;
height: 18px;
background-color: transparent;
border: 2px solid #828282;
}

Here's a guide on how to inject custom CSS. Here's how it looks like: 

Hope this helps. Thank you.

Hi Jan, 

THanks for responding. Unfortunately the code doesn't do what I am looking for. As you can see, your other box is not identical to the regular boxes. I want the box to have the same black outline, and have a white background. The checkmarks on the normal boxes is a small green checkmark graphic, while the other box turns blue with a small white checkmark

It looks like it's a bug on the check box/radio button themes that we have, it should actually get the same styling for the "Other" check box. Let me forward this to our developers to have it checked and fixed. Apologies for the inconvenience.

I'll try to come up with a working CSS code as an alternative, I'll get back to you as soon as I'm able to work it out.

Hi,

So I managed to find the working CSS code as an alternative while this is still being fixed.

.form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other::before {

    background-color : transparent !important;

    border : 2px solid #828282 !important;

    content : '' !important;

    position : absolute !important;

    display : inline-block !important;

    vertical-align : baseline!important ;

    margin-right : 4px !important;

    -moz-box-sizing : border-box !important;

    -webkit-box-sizing : border-box !important;

    box-sizing : border-box !important;

    -webkit-border-radius : 2px !important;

    -moz-border-radius : 2px !important;

    border-radius : 2px !important;

    left : 4px !important;

    top: 2px !important;

    width : 18px !important;

    height : 18px !important;

    cursor : pointer !important;

}

 

.form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other {

   cursor: pointer;

  -webkit-appearance: none !important;

  -moz-appearance: none !important;

  appearance: none !important;

  outline: 0 !important;

}

 

.form-checkbox-item:not(#foo) .form-radio-other, .form-checkbox-item:not(#foo) .form-checkbox-other:checked::after {

    opacity : 1 !important;

    background-color : #008000 !important;

    box-shadow : 0 3px 0 0 #008000, 3px 3px 0 0 #008000, 6px 3px 0 0 #008000, 9px 3px 0 0 #008000, -23px 6px 0 0 rgba(255, 255, 255, 0.68), 10px 1px 0 0 rgba(255, 255, 255, 0.68);

    transform : rotate(-45deg) !important;

    content : '' !important;

    position : absolute !important;

    z-index : 10 !important;

    display : inline-block !important;

    top : 7px !important;

    left : 10px !important;

    width : 4px !important;

    height : 4px !important;

}

You can paste it under your CSS tab in your Form Designer Tool. However, make sure that you don't have other CSS code conflicting with it. Here's my cloned form using that code: https://form.jotform.com/60693632275965. You can clone it to have a copy of it in your account and review how I setup my CSS there. Here's a guide on how to clone my form: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

Let us know if that works as a temporary workaround.