Mute default :focus form highlight

[josuke0227]

The applied border colour (border-color: #000;) is cascaded by the default border highlight (blue colour in Chrome). Therefore I reckon the default styling needs to be muted.

[github-actions]

Preview URLs

• /en-US/docs/Learn/Forms/Your_first_form

(comment last updated: 2024-10-18 02:20:18)

[hamishwillee]

Thanks - I am closing this because I think it is invalid. There don't appear to be any outline properties set on the box either before or after this change, and as far as I can tell there isn't any visual change either.

If you can show exactly what the before and after change is (screenshots) then perhaps we can discuss. Note that any changes made here also have to be made in the corresponding example code linked from the page.

[josuke0227]

Thanks for your response.

Here's where I reproduced the change:
https://developer.mozilla.org/en-US/docs/Learn/Forms/Your_first_form#summary

Here's how I applied the change and confirmed both the property is applied to the element and the appearance is affected as per the property.

Reproduction process 1

Reproduction process 2

Result

[hamishwillee]

Thank you, but I cannot reproduce. Using the current version you can see below the border is black to start with and that there is no computed property for outline - i.e. no blue outline that is inherited. It may be that this is set differently on another browser, but I still think adding this fix would be more confusing than helpful.

[josuke0227]

Hi, I tried to see how the focused form's appearance changes using my Windows laptop and I've got the same outline as yours so the difference in border colour can be concluded in the difference of the OS.

I also found the style (either blue or black) is defined in ":forcus-visible" pseudo selector.
Here is the evidence:

Your "outline-color" might be "rgb(16, 16, 16)"

From above, if you need to change the border colour to #000, you need the "outline: none" to make the border colour visible. However, it makes sense that it will be confusing as you mentioned. What about styling like below by using "outline-color" instead of "border-color"?

input:focus,
textarea:focus {
/* To give a little highlight on active elements */
outline-color: #000;
}

[hamishwillee]

THanks for your patience @josuke0227 .

Yes, I think that instead of muting the outline, what you have suggested will work better, and more important, be more consistent across browsers.

input:focus,
textarea:focus {
/* To give a little highlight on active elements */
outline-color: #000;
}

BUT, as I noted before, we also need to make this same change in https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html and the other linked examples - can you do that too, and link to here?

This should be tested on at least chrome and FF.

[josuke0227]

Hi,
I have just tested the "outline-color" with Chrome and FF. It seems that "outline-color" does not work without "outline-style" property on FF.

My suggestion is to use the following style instead of the past one.
This styling is tested and confirmed that it works for both Chrome and FF.
Please see the attached images below.

input:focus,
textarea:focus {
/* Set the outline width and style /
outline-style: solid;
/ To give a little highlight on active elements */
outline-color: #000;
}

• Evidence of not working

• Evidence of working (Chrome)

• Evidence of working (FF)

Regarding the below comment, thank you for sharing the URL.
As far as I checked, there do not seem to be similar cases except the URL you shared but I will open pull requests with the link to here as soon as I find them.

BUT, as I noted before, we also need to make this same change in https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html and the other linked examples - can you do that too, and link to here?

[hamishwillee]

@josuke0227 - thank you for the testing and confirmation.

Can you apply your fix here, and cross link from your PR to https://github.com/mdn/learning-area/blob/main/html/forms/your-first-HTML-form/first-form-styled.html

I can then review and merge them together.

[josuke0227]

Hi @hamishwillee,
Thanks for checking the results.

I've just updated the other one.
Please check out the link below.
mdn/learning-area#767

Thank you!

[hamishwillee]

Thanks @josuke0227 - might not get to this until Friday, but have not forgotten!

[hamishwillee]

Thanks very much @josuke0227 - also for your patience with my review.