[Proposal] Remove most class="hidden" for Fomantic checkbox/radiobox #9043

New Issue

GiteaMirror · 2025-11-02T08:26:52-06:00

GiteaMirror commented

2025-11-02 08:26:52 -06:00

Originally created by @wxiaoguang on GitHub (Jun 9, 2022).

According to https://fomantic-ui.com/modules/checkbox.html#/usage

The <input class="hidden" type="(checkbox|radio)" tabindex="0" ...> could be simplified to <input type="(checkbox|radio)" ...>

The "hidden" CSS class here is very ambiguous and seems not help about UI/UX in most cases. The comment for it is:

/* Initialized checkbox moves input below element to prevent manually triggering */
.ui.checkbox input.hidden {
  z-index: -1;
}

Originally created by @wxiaoguang on GitHub (Jun 9, 2022). According to https://fomantic-ui.com/modules/checkbox.html#/usage The `<input class="hidden" type="(checkbox|radio)" tabindex="0" ...>` could be simplified to `<input type="(checkbox|radio)" ...>` The "hidden" CSS class here is very ambiguous and seems not help about UI/UX in most cases. The comment for it is: ``` /* Initialized checkbox moves input below element to prevent manually triggering */ .ui.checkbox input.hidden { z-index: -1; } ```

GiteaMirror added the topic/ui label 2025-11-02 08:26:52 -06:00

GiteaMirror closed this issue

2025-11-02 08:26:52 -06:00

GiteaMirror commented

2025-11-02 08:26:52 -06:00

@silverwind commented on GitHub (Jun 9, 2022):

The hidden class seems to for the purpose of allowing a click on the label to toggle the checkbox which is not possible with their suggested HTML.

It's possible to make checkboxes toggleable through label by putting them inside it, for example https://jsfiddle.net/silverwind/seb670f3/, so something like that should be preferrable.

Generally I'd like to remove the fomantic checkbox/radio module and implement these ourselves. On modern CSS, there is no need to fake checkboxes via :before like Fomantic does. Instead, one can just style the input element directly.

@silverwind commented on GitHub (Jun 9, 2022): The hidden class seems to for the purpose of allowing a click on the label to toggle the checkbox which is not possible with their suggested HTML. It's possible to make checkboxes toggleable through label by putting them inside it, for example https://jsfiddle.net/silverwind/seb670f3/, so something like that should be preferrable. Generally I'd like to remove the fomantic checkbox/radio module and implement these ourselves. On modern CSS, there is no need to fake checkboxes via `:before` like Fomantic does. Instead, one can just style the `input` element directly.

GiteaMirror commented

2025-11-02 08:26:53 -06:00

@wxiaoguang commented on GitHub (Jun 9, 2022):

The hidden class seems to for the purpose of allowing a click on the label to toggle the checkbox which is not possible with their suggested HTML.
It's possible to make checkboxes toggleable through label by putting them inside it, for example https://jsfiddle.net/silverwind/seb670f3/, so something like that should be preferrable.

IIRC, <label><input checkbox></label> doesn't work for Fomantic UI CSS system (maybe broken UI?). That's what I used in Vue

2ae45cebbf/web_src/js/components/PullRequestMergeForm.vue (L25-L28)

Generally I'd like to remove the fomantic checkbox/radio module and implement these ourselves. On modern CSS, there is no need to fake checkboxes via :before like Fomantic does. Instead, one can just style the input element directly.

It's feasible. But Fomantic UI checkbox has some features which is not simple.

@wxiaoguang commented on GitHub (Jun 9, 2022): > The hidden class seems to for the purpose of allowing a click on the label to toggle the checkbox which is not possible with their suggested HTML. > It's possible to make checkboxes toggleable through label by putting them inside it, for example https://jsfiddle.net/silverwind/seb670f3/, so something like that should be preferrable. IIRC, `<label><input checkbox></label>` doesn't work for Fomantic UI CSS system (maybe broken UI?). That's what I used in Vue https://github.com/go-gitea/gitea/blob/2ae45cebbf2ec839bf2280765f958eb60d1f6374/web_src/js/components/PullRequestMergeForm.vue#L25-L28 > Generally I'd like to remove the fomantic checkbox/radio module and implement these ourselves. On modern CSS, there is no need to fake checkboxes via `:before` like Fomantic does. Instead, one can just style the `input` element directly. It's feasible. But Fomantic UI checkbox has some features which is not simple.

GiteaMirror commented

2025-11-02 08:26:53 -06:00

@wxiaoguang commented on GitHub (Jun 9, 2022):

To be more aggressive, I prefer to use native checkbox/radio/select as much as possible instead of these Fomantic UI checkbox/radio/dropdown. GitHub is using native HTML input elements as much as possible. And these native elements are more friendly for all browsers and a11y.

@wxiaoguang commented on GitHub (Jun 9, 2022): To be more aggressive, I prefer to use native checkbox/radio/select as much as possible instead of these Fomantic UI checkbox/radio/dropdown. GitHub is using native HTML input elements as much as possible. And these native elements are more friendly for all browsers and a11y.

GiteaMirror commented

2025-11-02 08:26:53 -06:00

@silverwind commented on GitHub (Jun 9, 2022):

Yes, fomantic checkbox/radio is a dead end, we should replace with native elements that don't rely on :before hacks. Checkboxes in Markdown are already native, we can just re-use those styles.

@silverwind commented on GitHub (Jun 9, 2022): Yes, fomantic checkbox/radio is a dead end, we should replace with native elements that don't rely on `:before` hacks. Checkboxes in Markdown are already native, we can just re-use those styles.

GiteaMirror commented

2025-11-02 08:26:54 -06:00

@Ryuno-Ki commented on GitHub (Jun 18, 2022):

Can we label this kind/ui?

Instead of nesting <input type="checkbox" /> (or radio) inside a <label>, they can be associated with id and for.

I agree with getting rid of ::before.
(:before is valid, too. But : is usually preferred for pseudo-classes, whereas :: is used for pseudo-elements).

@Ryuno-Ki commented on GitHub (Jun 18, 2022): Can we label this `kind/ui`? Instead of nesting `<input type="checkbox" />` (or `radio`) inside a `<label>`, they can be associated with `id` and `for`. I agree with getting rid of `::before`. (`:before` is valid, too. But `:` is usually preferred for pseudo-classes, whereas `::` is used for pseudo-elements).

GiteaMirror commented

2025-11-02 08:26:54 -06:00

@Ryuno-Ki commented on GitHub (Jun 18, 2022):

It's feasible. But Fomantic UI checkbox has some features which is not simple.

Which would that be? Looking through their documentation I couldn't spot anything, that couldn't be done with a few lines of HTML and JS.

@Ryuno-Ki commented on GitHub (Jun 18, 2022): > It's feasible. But Fomantic UI checkbox has some features which is not simple. Which would that be? Looking through their documentation I couldn't spot anything, that couldn't be done with a few lines of HTML and JS.

GiteaMirror commented

2025-11-02 08:26:54 -06:00

@wxiaoguang commented on GitHub (Jun 19, 2022):

It's feasible. But Fomantic UI checkbox has some features which is not simple.

Which would that be? Looking through their documentation I couldn't spot anything, that couldn't be done with a few lines of HTML and JS.

I mean the API for the Fomantic checkbox. I did a grep by .checkbox in the web_src/js directory. All these code should rewritten.

@wxiaoguang commented on GitHub (Jun 19, 2022): > > It's feasible. But Fomantic UI checkbox has some features which is not simple. > > Which would that be? Looking through their documentation I couldn't spot anything, that couldn't be done with a few lines of HTML and JS. I mean the API for the Fomantic checkbox. I did a grep by `.checkbox` in the `web_src/js` directory. All these code should rewritten.

GiteaMirror commented

2025-11-02 08:26:54 -06:00

@jn64 commented on GitHub (Jul 9, 2022):

Fomantic checkbox fails if user blocks remote fonts e.g. gfx.downloadable_fonts.enabled=false in Firefox, or popular browser extensions like uBlock

Example from gitea demo:

@jn64 commented on GitHub (Jul 9, 2022): Fomantic checkbox fails if user blocks remote fonts e.g. `gfx.downloadable_fonts.enabled=false` in Firefox, or popular browser extensions like uBlock Example from [gitea demo](https://try.gitea.io/user/login): ![Screenshot of checkbox on Gitea with remote fonts disabled](https://user-images.githubusercontent.com/23169302/178101998-96fcd1d7-0665-46a0-8bdf-c2f69ef02895.png)

GiteaMirror commented

2025-11-02 08:26:54 -06:00

@silverwind commented on GitHub (Jul 12, 2022):

Indeed, that's another argument for native checkboxes with SVG overlay, like we already do for Markdown checkboxes.

@silverwind commented on GitHub (Jul 12, 2022): Indeed, that's another argument for native checkboxes with SVG overlay, like we already do for Markdown checkboxes.

GiteaMirror commented

2025-11-02 08:26:55 -06:00

@wxiaoguang commented on GitHub (Jul 26, 2022):

Close this one. Wait for the rewriting the checkbox code using the native element.

@wxiaoguang commented on GitHub (Jul 26, 2022): Close this one. Wait for the rewriting the checkbox code using the native element.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/gitea#9043

[Proposal] Remove most class="hidden" for Fomantic checkbox/radiobox #9043

[Proposal] Remove most `class="hidden"` for Fomantic checkbox/radiobox #9043