I am building an ASP.NET MVC web application, and am adding some checkboxes to a page, with a certain class "css-checkbox" applied to the <input> element for the checkbox.
For some reason, as soon as I add this particular class "css-checkbox", the checkbox itself does not show.
Meaning: before I add this class to this <input> element, there is a checkbox showing, as I use bootstrap ui. After I add this particular class, I expect the styling of the checkbox to change, so it has a different appearance, but somehow, this checkbox will disppear altogether, and no checkbox is showing.
I inspected this element in the browser, and this particular class does show up in the css panel.
I suspected the some js file is interfering with this class, so I commented out all the js files on this page, 1 by 1, but none of this made any difference.
I searched around and tried different suggestions, like adding "display: inline-block; visibility: visible" etc. to this >input> element, but nothing I tried has worked.
So I'd like to ask for some ideas: how can I find out why this does not show, and how to fix it? Basically when I inspect the element, the class is there, but the checkbox ieself does not show in the browser.
Here is my html code:
<input type="checkbox" name="TicketCategories.Checked" value="false" id="TicketCategories_0__Checked" class="css-checkbox" />
Here is the class:
clip: rect(0 0 0 0);
/-webkit-appearance: checkbox !important;/
On this page, I have these js files, in the <head>:
As mentioned, I have commented out these js files, but none fixed the problem.
Any idea/suggestion will be appreciated! I have spent a few days on this, and searched around; but have not found anything that helped.