fix outdated Safari compatibility note for `appearance: none` #39876

mohammad-kenaan · 2025-06-09T17:50:11Z

This PR updates the compatibility information for the CSS property appearance: none.

Previously, the MDN note incorrectly stated that Safari does not support appearance: none. However, this limitation only applied to older versions of Safari. Modern Safari versions (from Safari 16 onwards) support it properly.

This correction improves the accuracy of the documentation and ensures developers are not misled by outdated notes.

Description

Clarified that Safari 16+ removed styling restrictions on , allowing appearance: none; for flexible styling.

Motivation

The previous documentation was outdated regarding Safari's behavior. This update improves accuracy and helps developers style search inputs consistently.

Additional details

Safari 16 Release Notes

Related issues and pull requests

This PR updates the compatibility information for the CSS property `appearance: none`. Previously, the MDN note incorrectly stated that Safari does not support `appearance: none`. However, this limitation only applied to older versions of Safari. Modern Safari versions (from Safari 16 onwards) support it properly. This correction improves the accuracy of the documentation and ensures developers are not misled by outdated notes.

github-actions · 2025-06-09T17:52:11Z

Preview URLs

/en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling

External URLs (4)

URL: /en-US/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling
Title: Advanced form styling

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ (1 time) (Note! This may be a new URL 👀)
https://kimmobrunfeldt.github.io/progressbar.js/ (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/learning-area/html/forms/styling-examples/styled-file-picker.html (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/learning-area/html/forms/styling-examples/ugly-controls.html (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2025-06-11 08:41:47)

…rm_styling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

chrisdavidmills

Hi @mohammad-kenaan, and thanks for your concern.

However, this isn't saying that Safari doesn't support appearance: none. This is saying that setting appearance: none is useful because it allows you to get around the restrictions on styling search inputs in Safari.

Also, the release notes you link to don't say that appearance: none is supported as of Safari 16. It says "Removed most non-standard CSS appearance values."

So, it sounds like there is a misunderstanding here, and that you are conflating something unrelated with the main point of the PR.

If we could find some solid evidence of search inputs being fully stylable as of a certain version of Safari, that would warrant a change.

mohammad-kenaan · 2025-06-09T18:32:58Z

Thanks for the clarification, Chris!

You're absolutely right that the current note focuses on styling restrictions in Safari.

However, I’d like to clarify that the specific example mentioned — being unable to style font-size on <input type="search"> — no longer applies in Safari 16 and newer. I tested this directly on Safari 18.5 on macOS and was able to set font-size without needing appearance: none;.

Would it make sense to update the note to specify that this restriction applies only to older versions of Safari?

This way, developers won’t be misled into thinking they still need appearance: none; for such basic styling.

chrisdavidmills · 2025-06-10T10:28:24Z

Would it make sense to update the note to specify that this restriction applies only to older versions of Safari?

This way, developers won’t be misled into thinking they still need appearance: none; for such basic styling.

@mohammad-kenaan Right, I see what you mean now. I don't think we need such a large section to cover this issue anymore, now it has been fixed in Safari for a few versions. What do you think about cutting the content of this section down to something like this:

The appearance: none; value used to be particularly useful for consistently styling <input type="search"> elements. Without it, Safari didn't allow {{cssxref("height")}} or {{cssxref("font-size")}} values to be set on them. However, this is no longer the case in Safari 16 and later. You may still want to target input[type="search"] explicitly with appearance: none; if your browser support matrix includes Safari versions older than 16.

In search inputs, the "x" delete button, which appears when the value is not null, disappears when the input loses focus in Edge and Chrome, but stays put in Safari. To remove via CSS, you can use this following rule:
input[type="search"]:not(:focus, :active)::-webkit-search-cancel-button {
  display: none;
}

?

mohammad-kenaan · 2025-06-10T14:46:15Z

What a great idea. I'll update the assignment right away.

Being unable to style font-size on <input type="search"> — no longer applies in Safari 16 and newer. I tested this directly on Safari 18.5 on macOS and was able to set font-size without needing appearance: none;. This way, developers won’t be misled into thinking they still need appearance: none; for such basic styling.

files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md

…rm_styling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

chrisdavidmills

@mohammad-kenaan couple more bits for you; very close now!

chrisdavidmills · 2025-06-10T16:46:34Z

files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md

@@ -100,27 +100,16 @@ In most cases, the effect is to remove the stylized border, which makes CSS styl

 ### Taming search boxes

-[`<input type="search">`](/en-US/docs/Web/HTML/Reference/Elements/input/search) is basically just a text input, so why is `appearance: none;` useful here? The answer is that Safari search boxes have some styling restrictions — you can't adjust their `height` or `font-size` freely, for example.
+[`<input type="search">`](/en-US/docs/Web/HTML/Reference/Elements/input/search) is basically just a text input, so why is `appearance: none;` useful here? The `appearance: none;` value used to be particularly useful for consistently styling input type="search" elements. Without it, Safari didn't allow {{cssxref("height")}} or {{cssxref("font-size")}} values to be set on them. However, this is no longer the case in Safari 16 and later. You may still want to target `input[type="search"]` explicitly with `appearance: none;` if your browser support matrix includes Safari versions older than 16.


Suggested change

[`<input type="search">`](/en-US/docs/Web/HTML/Reference/Elements/input/search) is basically just a text input, so why is `appearance: none;` useful here? The `appearance: none;` value used to be particularly useful for consistently styling input type="search" elements. Without it, Safari didn't allow {{cssxref("height")}} or {{cssxref("font-size")}} values to be set on them. However, this is no longer the case in Safari 16 and later. You may still want to target `input[type="search"]` explicitly with `appearance: none;` if your browser support matrix includes Safari versions older than 16.

The `appearance: none;` value used to be particularly useful for consistently styling [`<input type="search">`](/en-US/docs/Web/HTML/Reference/Elements/input/search) elements. Without it, Safari didn't allow {{cssxref("height")}} or {{cssxref("font-size")}} values to be set on them. However, this is no longer the case in Safari 16 and later. You may still want to target `input[type="search"]` explicitly with `appearance: none;` if your browser support matrix includes Safari versions older than 16.

I don't think that first line fits well anymore.

chrisdavidmills · 2025-06-10T16:47:43Z

files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md

@@ -100,27 +100,16 @@ In most cases, the effect is to remove the stylized border, which makes CSS styl

 ### Taming search boxes


Suggested change

### Taming search boxes

### Search boxes and `appearance`

We're not really doing as much taming any more ;-)

@chrisdavidmills

Replaced the old "Taming search boxes" heading to better reflect modern browser behavior with search boxes, as suggested by @chrisdavidmills.

github-actions · 2025-06-10T17:55:49Z

files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md


-[`<input type="search">`](/en-US/docs/Web/HTML/Reference/Elements/input/search) is basically just a text input, so why is `appearance: none;` useful here? The answer is that Safari search boxes have some styling restrictions — you can't adjust their `height` or `font-size` freely, for example.
+The `appearance: none;` value used to be particularly useful for consistently styling [`<input type="search">`](/en-US/docs/Web/HTML/Reference/Elements/input/search)  elements. Without it, Safari didn't allow {{cssxref("height")}} or {{cssxref("font-size")}} values to be set on them. However, this is no longer the case in Safari 16 and later. You may still want to target `input[type="search"]` explicitly with `appearance: none;` if your browser support matrix includes Safari versions older than 16.


[mdn-linter] _{reported by reviewdog 🐶}

Suggested change

The `appearance: none;` value used to be particularly useful for consistently styling [`<input type="search">`](/en-US/docs/Web/HTML/Reference/Elements/input/search) elements. Without it, Safari didn't allow {{cssxref("height")}} or {{cssxref("font-size")}} values to be set on them. However, this is no longer the case in Safari 16 and later. You may still want to target `input[type="search"]` explicitly with `appearance: none;` if your browser support matrix includes Safari versions older than 16.

The `appearance: none;` value used to be particularly useful for consistently styling [`<input type="search">`](/en-US/docs/Web/HTML/Reference/Elements/input/search) elements. Without it, Safari didn't allow {{cssxref("height")}} or {{cssxref("font-size")}} values to be set on them. However, this is no longer the case in Safari 16 and later. You may still want to target `input[type="search"]` explicitly with `appearance: none;` if your browser support matrix includes Safari versions older than 16.

chrisdavidmills

Awesome, thanks again @mohammad-kenaan! I think this is ready to merge now.

(I also ran the markdown through Grammarly and made some general improvements to the grammar. I hope you don't mind)

@chrisdavidmills

) * fix outdated Safari compatibility note for `appearance: none` This PR updates the compatibility information for the CSS property `appearance: none`. Previously, the MDN note incorrectly stated that Safari does not support `appearance: none`. However, this limitation only applied to older versions of Safari. Modern Safari versions (from Safari 16 onwards) support it properly. This correction improves the accuracy of the documentation and ensures developers are not misled by outdated notes. * Update files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix outdated Safari compatibility note for appearance: none Being unable to style font-size on <input type="search"> — no longer applies in Safari 16 and newer. I tested this directly on Safari 18.5 on macOS and was able to set font-size without needing appearance: none;. This way, developers won’t be misled into thinking they still need appearance: none; for such basic styling. * Update files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: clean up spacing and minor text adjustment * docs: update heading to "Search boxes and `appearance`" Replaced the old "Taming search boxes" heading to better reflect modern browser behavior with search boxes, as suggested by @chrisdavidmills. * fix: remove double space after markdown link * some grammar cleanup --------- Co-authored-by: Chris Mills <chrisdavidmills@gmail.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

mohammad-kenaan requested a review from a team as a code owner June 9, 2025 17:50

mohammad-kenaan requested review from chrisdavidmills and removed request for a team June 9, 2025 17:50

github-actions bot added Content:Learn Learning area docs size/s [PR only] 6-50 LoC changed labels Jun 9, 2025

Update files/en-us/learn_web_development/extensions/forms/advanced_fo…

76511d2

…rm_styling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

chrisdavidmills reviewed Jun 9, 2025

View reviewed changes

Merge branch 'main' into appearance-with-safari

54c5dac

github-actions bot reviewed Jun 10, 2025

View reviewed changes

files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md Outdated Show resolved Hide resolved

mohammad-kenaan and others added 4 commits June 10, 2025 11:36

Update files/en-us/learn_web_development/extensions/forms/advanced_fo…

1da3caa

…rm_styling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/learn_web_development/extensions/forms/advanced_fo…

e0cc66e

…rm_styling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/learn_web_development/extensions/forms/advanced_fo…

6f8ea82

…rm_styling/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

chore: clean up spacing and minor text adjustment

99bfa86

mohammad-kenaan requested a review from chrisdavidmills June 10, 2025 16:14

chrisdavidmills requested changes Jun 10, 2025

View reviewed changes

docs: update heading to "Search boxes and appearance"

3c278c4

Replaced the old "Taming search boxes" heading to better reflect modern browser behavior with search boxes, as suggested by @chrisdavidmills.

github-actions bot reviewed Jun 10, 2025

View reviewed changes

fix: remove double space after markdown link

d79e6d3

mohammad-kenaan requested a review from chrisdavidmills June 10, 2025 18:30

some grammar cleanup

4eae98b

github-actions bot added the size/m [PR only] 51-500 LoC changed label Jun 11, 2025

chrisdavidmills approved these changes Jun 11, 2025

View reviewed changes

chrisdavidmills merged commit 6951414 into mdn:main Jun 11, 2025
8 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix outdated Safari compatibility note for `appearance: none` #39876

fix outdated Safari compatibility note for `appearance: none` #39876

Uh oh!

mohammad-kenaan commented Jun 9, 2025

Uh oh!

github-actions bot commented Jun 9, 2025 •

edited

Loading

Uh oh!

chrisdavidmills left a comment

Uh oh!

mohammad-kenaan commented Jun 9, 2025

Uh oh!

chrisdavidmills commented Jun 10, 2025 •

edited

Loading

Uh oh!

mohammad-kenaan commented Jun 10, 2025

Uh oh!

Uh oh!

chrisdavidmills left a comment

Uh oh!

chrisdavidmills Jun 10, 2025

Uh oh!

chrisdavidmills Jun 10, 2025

Uh oh!

chrisdavidmills Jun 10, 2025

Uh oh!

chrisdavidmills Jun 10, 2025

Uh oh!

github-actions bot Jun 10, 2025

Uh oh!

chrisdavidmills left a comment

Uh oh!

Uh oh!

Uh oh!

		@@ -100,27 +100,16 @@ In most cases, the effect is to remove the stylized border, which makes CSS styl

		### Taming search boxes


		[`<input type="search">`](/en-US/docs/Web/HTML/Reference/Elements/input/search) is basically just a text input, so why is `appearance: none;` useful here? The answer is that Safari search boxes have some styling restrictions — you can't adjust their `height` or `font-size` freely, for example.
		The `appearance: none;` value used to be particularly useful for consistently styling [`<input type="search">`](/en-US/docs/Web/HTML/Reference/Elements/input/search) elements. Without it, Safari didn't allow {{cssxref("height")}} or {{cssxref("font-size")}} values to be set on them. However, this is no longer the case in Safari 16 and later. You may still want to target `input[type="search"]` explicitly with `appearance: none;` if your browser support matrix includes Safari versions older than 16.

fix outdated Safari compatibility note for appearance: none #39876

fix outdated Safari compatibility note for appearance: none #39876

Uh oh!

Conversation

mohammad-kenaan commented Jun 9, 2025

Description

Motivation

Additional details

Related issues and pull requests

Uh oh!

github-actions bot commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

mohammad-kenaan commented Jun 9, 2025

Uh oh!

chrisdavidmills commented Jun 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mohammad-kenaan commented Jun 10, 2025

Uh oh!

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions bot Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

chrisdavidmills left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

fix outdated Safari compatibility note for `appearance: none` #39876

fix outdated Safari compatibility note for `appearance: none` #39876

github-actions bot commented Jun 9, 2025 •

edited

Loading

chrisdavidmills commented Jun 10, 2025 •

edited

Loading