Indicate form field readonly via background by silverwind · Pull Request #37175 · go-gitea/gitea

silverwind · 2026-04-10T22:53:59Z

The Run As Username field on the install page was a readonly input that looked editable but wasn't, confusing users. Style readonly inputs with a subtle background, matching other frameworks.

Fixes #37174

This PR was written with the help of Claude Opus 4.6

The 'Run As Username' field on the install page was a readonly input that looked editable but wasn't, confusing users on mobile devices where the on-screen keyboard wouldn't appear. Style readonly inputs in inline form fields to look like plain text by removing border, background, and horizontal padding. Also update the help text to clarify the value is auto-detected. Fixes go-gitea#37174 Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>

wxiaoguang · 2026-04-11T01:47:29Z

was a readonly input that looked editable but wasn't, confusing users.

What's the UI/UX best practice of using "readonly"? How do other frameworks or web sites do?

My understanding is:

If the content is for display-only: don't use "readonly" (change the "Run As Username" to a "span")
If the content is for copy-only: use "readonly", and show it with borders (maybe use some slightly different style from a normal input?)
- Or, also use a span, and add a "copy" button?

wxiaoguang · 2026-04-11T01:51:23Z

And, since it is "readonly", the required red star * seems not needed.

silverwind · 2026-04-11T08:26:28Z

I think readonly in input should not be used. Default browser styling gives no indication and I think most frameworks also don't give any.

If used, it must be manually indicated, which was done here, so we could also just remove the styling and keep the help text-only change if you don't like the styling.

@lunny why not backport? Stale translation issue? Given that it's a pure improvement, I see no reason not to backport only for the styling change.

silverwind · 2026-04-11T08:35:31Z

A subtle background color change seems the most common way frameworks indicate it and I agree.

Replace the previous transparent/plain-text approach for readonly inputs with a subtle background color using --color-secondary-bg. Use proper Fomantic override selectors without !important for input, textarea, select, and dropdown elements. Remove misleading required asterisk from the readonly run_user field on the install page since the value is auto-detected and not editable. Add devtest page at /devtest/form-fields showcasing all form field types (input, textarea, select, dropdown) in their various states (normal, readonly, disabled, error, required). Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>

silverwind · 2026-04-11T08:52:51Z

Updated and also added a devtest page:

required red star * seems not needed

required class removed

Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>

wxiaoguang · 2026-04-11T10:06:17Z

Updated and also added a devtest page:

It seems that "error" doesn't have border radius (it's not a blocker, just a nit)

silverwind · 2026-04-11T10:08:03Z

Yes I noticed too, may as well fix it here.

Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>

silverwind · 2026-04-11T10:22:16Z

Radius fixed and <select> removed from devtest because those don't work there (only dropdown).

Signed-off-by: silverwind <me@silverwind.io>

lunny · 2026-04-11T15:55:33Z

I think readonly in input should not be used. Default browser styling gives no indication and I think most frameworks also don't give any.

If used, it must be manually indicated, which was done here, so we could also just remove the styling and keep the help text-only change if you don't like the styling.

@lunny why not backport? Stale translation issue? Given that it's a pure improvement, I see no reason not to backport only for the styling change.

It's backport 1.25

The `Run As Username` field on the install page was a `readonly` input that looked editable but wasn't, confusing users. Style `readonly` inputs with a subtle background, matching other frameworks. Fixes: go-gitea#37174 Signed-off-by: wxiaoguang <wxiaoguang@gmail.com> Signed-off-by: silverwind <me@silverwind.io> Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

@silverwind

…, #37180) (#37184) Backport #37175 by @silverwind The `Run As Username` field on the install page was a `readonly` input that looked editable but wasn't, confusing users. Style `readonly` inputs with a subtle background, matching other frameworks. <img width="735" height="131" alt="image" src="https://github.com/user-attachments/assets/cb76ce71-faab-4300-811e-e4c503b59f9a" /> Backport #37180 The comment "so just use current one if config says default" is not right anymore: "git" isn't the "default" value of RunUser (Comment out app.example.ini #15807). The RunUser's value is from current session's username. Fixes #37174 --------- Signed-off-by: wxiaoguang <wxiaoguang@gmail.com> Signed-off-by: silverwind <me@silverwind.io> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

* main: Add comment for the design of "user activity time" (go-gitea#37195) fix(api): handle missing base branch in PR commits API (go-gitea#37193) Refactor htmx and fetch-action related code (go-gitea#37186) Fix encoding for Matrix Webhooks (go-gitea#37190) Always show owner/repo name in compare page dropdowns (go-gitea#37172) fix(api): handle fork-only commits in compare API (go-gitea#37185) Improve Contributing docs and set a release schedule (go-gitea#37109) Update Nix flake (go-gitea#37183) Remove outdated RunUser logic (go-gitea#37180) Refactor flash message and remove SanitizeHTML template func (go-gitea#37179) Indicate form field readonly via background (go-gitea#37175) Remove dead CSS rules (go-gitea#37173) Fix flaky `TestCatFileBatch/QueryTerminated` test (go-gitea#37159) Implement logout redirection for reverse proxy auth setups (go-gitea#36085) Add missing `//nolint:depguard` (go-gitea#37162)

GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 10, 2026

github-actions Bot added the modifies/frontend label Apr 10, 2026

silverwind added the backport/v1.25 This PR should be backported to Gitea 1.25 label Apr 10, 2026

silverwind changed the title ~~Style readonly form inputs as plain text~~ Style readonly inline form inputs as plain text Apr 10, 2026

run_user_helper

dd2ab45

wxiaoguang reviewed Apr 11, 2026

View reviewed changes

Comment thread web_src/css/modules/form.css Outdated

lunny removed the backport/v1.25 This PR should be backported to Gitea 1.25 label Apr 11, 2026

silverwind changed the title ~~Style readonly inline form inputs as plain text~~ Indicate form readonly via background Apr 11, 2026

github-actions Bot added the modifies/templates label Apr 11, 2026

silverwind added the backport/v1.26 This PR should be backported to Gitea 1.26 label Apr 11, 2026

Fix editorconfig: convert spaces to tabs in form-fields.tmpl

3d15125

Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>

wxiaoguang reviewed Apr 11, 2026

View reviewed changes

Comment thread templates/install.tmpl Outdated

Update templates/install.tmpl

95acb90

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>

wxiaoguang approved these changes Apr 11, 2026

View reviewed changes

GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Apr 11, 2026

Remove border-radius reset on error fields and select devtest section

540c0a1

Co-Authored-By: Claude (Opus 4.6) <noreply@anthropic.com>

silverwind changed the title ~~Indicate form readonly via background~~ Indicate form field readonly via background Apr 11, 2026

wxiaoguang approved these changes Apr 11, 2026

View reviewed changes

silverwind commented Apr 11, 2026

View reviewed changes

Comment thread options/locale/locale_en-US.json

Remove inaccurate note (windows)

0558c9a

Signed-off-by: silverwind <me@silverwind.io>

silverwind commented Apr 11, 2026

View reviewed changes

Comment thread options/locale/locale_en-US.json Outdated

revert to original help text

0b41041

Signed-off-by: silverwind <me@silverwind.io>

TheFox0x7 approved these changes Apr 11, 2026

View reviewed changes

GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Apr 11, 2026

silverwind added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 11, 2026

Merge branch 'main' into install-run-user-readonly

7cba0a9

silverwind enabled auto-merge (squash) April 11, 2026 14:06

silverwind merged commit ba9258c into go-gitea:main Apr 11, 2026
26 checks passed

silverwind deleted the install-run-user-readonly branch April 11, 2026 14:38

GiteaBot added this to the 1.27.0 milestone Apr 11, 2026

GiteaBot removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Apr 11, 2026

GiteaBot added the backport/done All backports for this PR have been created label Apr 12, 2026

GiteaBot mentioned this pull request Apr 12, 2026

Indicate form field readonly via background, fix RunUser config (#37175, #37180) #37184

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Indicate form field readonly via background#37175

Indicate form field readonly via background#37175
silverwind merged 9 commits intogo-gitea:mainfrom
silverwind:install-run-user-readonly

silverwind commented Apr 10, 2026 •

edited

Loading

Uh oh!

wxiaoguang commented Apr 11, 2026 •

edited

Loading

Uh oh!

wxiaoguang commented Apr 11, 2026

Uh oh!

Uh oh!

silverwind commented Apr 11, 2026 •

edited

Loading

Uh oh!

silverwind commented Apr 11, 2026

Uh oh!

silverwind commented Apr 11, 2026 •

edited

Loading

Uh oh!

Uh oh!

wxiaoguang commented Apr 11, 2026

Uh oh!

silverwind commented Apr 11, 2026

Uh oh!

silverwind commented Apr 11, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lunny commented Apr 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

silverwind commented Apr 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

wxiaoguang commented Apr 11, 2026

Uh oh!

Uh oh!

silverwind commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

silverwind commented Apr 11, 2026

Uh oh!

silverwind commented Apr 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

wxiaoguang commented Apr 11, 2026

Uh oh!

silverwind commented Apr 11, 2026

Uh oh!

silverwind commented Apr 11, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lunny commented Apr 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

silverwind commented Apr 10, 2026 •

edited

Loading

wxiaoguang commented Apr 11, 2026 •

edited

Loading

silverwind commented Apr 11, 2026 •

edited

Loading

silverwind commented Apr 11, 2026 •

edited

Loading