Elementor Demo Site

Checkboxes that disappear

This page has some custom CSS to style the checkboxes. See below. This simulates certain “Elementor-compatible” themes such as OceanWP, which tries to style the checkboxes to something fancier than the default.

The styling assumes that the CSS for checkboxes is display: inline-block. Actually, OceanWP has the aforementioned CSS rule applied to the checkbox selector. This is also the user agent stylesheet default in all the browsers I’ve checked.

But, because Elementor changes checkboxes to display: inline, the checkboxes will disappear. 

This is the styling applied to the page

				
					selector input[type="checkbox"] { 
    box-sizing: border-box; 
    background-color: white; 
    width: 30px; 
    height: 30px; 
    border: 1px solid black; 
    -webkit-appearance: none; 
}

This is a form

You might not see the checkbox below. This is because of a conflict with the CSS of Elementor which applies a non-standard rule.

This is a clone of the above form

The difference is that this form has some custom CSS which overrides/resets Elementors conflicting CSS rule and allows the checkbox to be seen:

selector input[type="checkbox"] {
    display: inline-block
}
This is the footer