Form Checkbox Not Displaying (Elementor)

Form Checkbox Not Displaying (Elementor). Elementor applies a non-standard rule of display: inline to checkboxes. This makes Elementor forms incompatible with certain themes which applies some custom styling to checkboxes. The result is that checkboxes disappear from screen, or are shown as thin vertical bars.

Use the latest version of theme together with the latest version of Elementor Pro and create a form with checkboxes. The checkboxes will appear as thin vertical bars instead of boxes.

Alternatively create the following custom CSS for checkboxes:

[vc_row][vc_column][vc_column_text][/vc_column_text][vc_column_text]input[type="checkbox"] {
background-color: white;
width: 30px;
height: 30px;
border: 1px solid black;
-webkit-appearance: none;
}[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Isolating the problem

The default CSS display rule for input[type="checkbox"] is display: inline-block. You can verify this by inspecting the User Agent style sheet of Firefox or Chrome, or by reading the W3C Recommendation.

Elementor needs a good explanation for overriding this with the non-standard display: inline.

and…

Here are some things you can try to troubleshoot the problem:

• Check if the checkbox element is added to the form: Make sure that you have added a checkbox element to your form in Elementor. To add a checkbox element, drag and drop the “Checkboxes” widget from the left-hand panel onto your form.
• Verify the visibility settings of the checkbox: Ensure that the visibility settings of the checkbox element are correctly configured. Check that the element is not set to hidden, and that it is not overlapping with another element on the page.
• Check the form styling: Sometimes, the issue could be related to the styling of the form. Verify if the checkbox is styled with CSS that may be causing it to disappear or blend into the background. You can use the inspector tool to look for any CSS rules that are affecting the checkbox.
• Inspect the page’s code: You can use your browser’s developer tools to inspect the page’s code and verify if the checkbox code is present in the HTML. If it is not present, then there may be an issue with the form widget.
• Check for conflicts with other plugins: Sometimes, conflicts with other plugins can cause form elements not to display properly. You can try deactivating other plugins on your site to see if this resolves the issue.

If none of the above troubleshooting steps work, you may need to contact Elementor support for further assistance.