Small issue with `cursor: pointer` on certain labels (checkboxes and radios)
dallanlee opened this issue · comments
When a .label after an <input> of type=radio and type=checkbox is within a .field that has display: inline-block (i.e. <label class="field -inline">) the browser will not respect the cursor: pointer style applied to the .label (The cutestrap style .field [type=checkbox]+.label, .field [type=radio]+.label { cursor: pointer })
You can demo what I mean on the cutestrap.com homepage under 'Forms'. 'Cone' and 'Bowl' radios do not show a pointer cursor (except when hovering the radio ring/dot because it's a pseudo ::before element). But the 'Add Sprinkles' checkbox before the submit does show a pointer cursor over the label text (because it's not within a display: inline-block <label>.
It seems like setting cursor: pointer directly on .field [type=radio], .field [type=checkbox] is acceptable (I'm not necessarily an expert) and that would solve the issue.
I haven't used the light framework yet but it seems awesome and how I like to write CSS since I don't have to support anything but the latest browsers. Thanks for great work @tylerchilds.