If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

select input element does not show blue border on windows

NEW
Unassigned

Status

()

Core
Layout: Form Controls
a year ago
11 months ago

People

(Reporter: gasolin, Unassigned)

Tracking

(Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

a year ago
based on bug 1294480 comment 7:

* xul <textbox> selection have a blue focus-border
* alas normal html <input/> selection does not have a blue focus-border!


On other platform these 2 elements looks like the same. (both have a blue focus-border)

On windows the blue focus-border effect should shown on `normal html <input/>` as well
(Reporter)

Comment 1

a year ago
sample from bug 1294480 https://bugzilla.mozilla.org/attachment.cgi?id=8780179
(Reporter)

Comment 2

a year ago
default `input` inherit from xul `textfield` elements appearace

https://dxr.mozilla.org/mozilla-central/source/layout/style/res/forms.css#81

input {
  -moz-appearance: textfield;
  -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
...
}

Though I can't find any windows specific treatment here nor in browser.css https://dxr.mozilla.org/mozilla-central/source/browser/themes/windows/browser.css yet
Component: Layout: Form Controls → Editor
(Reporter)

Comment 3

a year ago
Robert, do you have idea about where to trace the platform specific input element styles?
Flags: needinfo?(robert.strong.bugs)
If you are referring to css styling you should ask dao. If this is in regards to styles set by the operating system you should ask jmathies.
Flags: needinfo?(robert.strong.bugs)
(Reporter)

Comment 5

a year ago
Thanks robert!

I guess this issue is about native theming, needinfo jmathies
Flags: needinfo?(jmathies)
Looks like this might be a styling bug in devtools, do you see this in any other content?
Flags: needinfo?(jmathies) → needinfo?(gasolin)
(Reporter)

Comment 7

a year ago
Yes, a simple jsfiddle can reproduce the issue.

put `<input>` in html field in https://jsfiddle.net/

run it and focus on the field in windows/mac/linux

You'll see there's blue border on mac/linux, but no blue border on windows
Flags: needinfo?(gasolin) → needinfo?(jmathies)
Bug summary afaict: 

we switched from using a XUL text input in the dev tool search input to an html:input wrapped in a html:div via bug 1265759. At which point we lost a heavy blue focus border.

Generally for html inputs we have a blue border for focused inputs (jsfiddle test case shows this) but this border doesn't show up in dev tools for some reason.
Flags: needinfo?(jmathies)
(In reply to Fred Lin [:gasolin] from comment #7)
> Yes, a simple jsfiddle can reproduce the issue.
> 
> put `<input>` in html field in https://jsfiddle.net/
> 
> run it and focus on the field in windows/mac/linux
> 
> You'll see there's blue border on mac/linux, but no blue border on windows

I can't reproduce this, the  border is there but it's less obvious.
neil, any ideas here? our html inputs look fine in content but when we use them in dev tools they lose their focus highlight.
Flags: needinfo?(enndeakin)

Comment 11

a year ago
I don't.
Flags: needinfo?(enndeakin)

Updated

11 months ago
Component: Editor → Layout: Form Controls
You need to log in before you can comment on or make changes to this bug.