1296985 - select input element does not show blue border on windows

Status: NEW

(Core :: Layout: Form Controls, defect)

Description

[[e-mail]]

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

Comment 1

[[e-mail]]

sample from bug 1294480 https://bugzilla.mozilla.org/attachment.cgi?id=8780179

Comment 2

[[e-mail]]

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

Comment 3

[[e-mail]]

Robert, do you have idea about where to trace the platform specific input element styles?

Comment 4

[Robert Strong (they/them - no direct email)]

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.

Comment 5

[[e-mail]]

Thanks robert!

I guess this issue is about native theming, needinfo jmathies

Comment 6

[Jim Mathies [:jimm]]

Looks like this might be a styling bug in devtools, do you see this in any other content?

Comment 7

[[e-mail]]

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

Comment 8

[Jim Mathies [:jimm]]

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.

Comment 9

[Jim Mathies [:jimm]]

(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.

Comment 10

[Jim Mathies [:jimm]]

neil, any ideas here? our html inputs look fine in content but when we use them in dev tools they lose their focus highlight.

Comment 11

[Neil Deakin]

I don't.