No focus styling on the input[type="color"] element

Bug graveyard
, , ,
1

Steps to reproduce

  • Download Obsidian (v1.1.9)
  • Open the appearance settings
  • tab through the buttons until you get a color input
  • no focus indicator

Expected result

A focus indicator

Actual result

No focus indicator

Environment

  • Operating system: Windows 11 Pro x64
  • Debug info:

SYSTEM INFO:
Obsidian version: v1.1.9
Installer version: v1.0.3
Operating system: Windows 10 Pro 10.0.22621
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: off
Plugins installed: 2
Plugins enabled: 2
1: Hot Reload v0.1.10
2: Obsidian Functionplot v1.2.1

RECOMMENDATIONS:
Community plugins: for bugs, please first try updating all your plugins to latest. If still not fixed, please try to make the issue happen in the Sandbox Vault or disable community plugins.

Additional information

All elements are styled using something along the lines of input[type="text"]:focus to give them a box shadow. The color input is missing in the CSS selector and this is the reason it is not highlighted in the same way. Additionally, the element is square so it doesn’t look great if you just apply an outline.

Solution

  • Add input[type="color"]:focus to the selector in line 4489 in app.css
  • Add input[type="color"] {border-radius: 50%;} in the same file
2

thanks

3

This will be fixed in the next update.

4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.