Menu
I'm not sure what is going on. There should be a checkbox to the left of "Remember Me" and two test ones at the bottom for I have a bike, I have a car. They display in Firefox but not in Chrome. I believe I have a CSS problem but can't find it? Can anyone please help?
http://www.cloudtute.com/auth
917
The problem is caused by the fact you are using display:none to hide the checkbox and it doesn't work on all environments. the concept is having the user clicking a real -invisible- checkbox and propagating the style using the :checked selector as you did.
Yours likely says 'DEFAULT' or 'ENABLED'. You want it to say 'DISABLED'. Changing this setting will also force you to relaunch Chrome. Once you relaunch, go look at the page in SchedulesPlus where you previously saw the blue checkboxes and see if they are back to whitebox/blackcheck.
Checking if a checkbox is checked First, select the checkbox using a DOM method such as getElementById() or querySelector() . Then, access the checked property of the checkbox element. If its checked property is true , then the checkbox is checked; otherwise, it is not.
Checkboxes are created with the HTML <input> tag. It can be nested inside a <form> element or they can stand alone. They can also be associated with a form with the help of form attribute of the <input> tag.
I am answering on a broader level to those that are running into this issue of checkboxes not showing up in Chrome. And were directed here by google. You may also have this problem in Safari since both are currently using WebKit.
We ran into this issue on our own website where the checkboxes and radio inputs were not displaying properly. But fixed it by adding this to our CSS.
input[type=checkbox] { -webkit-appearance:checkbox; } Now it works fine.
As you can see, another developer had added -webkit-appearance: none; just like in your case. In our case it was because I had started with a theme.
But to make absolutely sure that the inputs show up, it is safe to just declare those rules in your CSS. In this page I placed the styles in the <style> tag (which I don't recommend) but I took the screenshot when I was still testing. The better practice would be to remove the conflicting styles and add styles in the appropriate folder.
Additional Resources:
https://css-tricks.com/almanac/properties/a/appearance/
https://davidwalsh.name/webkit-appearance
What is WebKit and how is it related to CSS?
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
119
This line in your CSS:
-webkit-appearance: none; In the style rule for input, button, select, textarea is breaking things for you.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
