From 051d02b402b7f76c2078b12283aa18318c34c38b Mon Sep 17 00:00:00 2001 From: Husam Date: Thu, 3 Sep 2026 12:20:06 +0300 Subject: [PATCH 1/6] Hyphenate user-defined, client-side, and similar modifiers (#45462) --- files/en-us/mozilla/firefox/releases/61/index.md | 2 +- .../imsc/mapping_video_time_codes_to_imsc/index.md | 2 +- .../guides/cognitive_accessibility/index.md | 2 +- .../guides/understanding_wcag/operable/index.md | 2 +- .../en-us/web/api/cssfontfeaturevaluesrule/index.md | 12 ++++++------ .../web/api/htmlscriptelement/textcontent/index.md | 2 +- .../using_server-sent_events/index.md | 2 +- files/en-us/web/api/window/setinterval/index.md | 2 +- files/en-us/web/api/window/settimeout/index.md | 2 +- .../reference/global_objects/eval/index.md | 2 +- .../global_objects/function/function/index.md | 2 +- .../javascript/reference/statements/import/index.md | 2 +- .../web/security/authentication/passkeys/index.md | 2 +- 13 files changed, 18 insertions(+), 18 deletions(-) diff --git a/files/en-us/mozilla/firefox/releases/61/index.md b/files/en-us/mozilla/firefox/releases/61/index.md index 116dd848eea1ec7..fe83b54438675f1 100644 --- a/files/en-us/mozilla/firefox/releases/61/index.md +++ b/files/en-us/mozilla/firefox/releases/61/index.md @@ -71,7 +71,7 @@ _No changes._ - The [Fetch API](/en-US/docs/Web/API/Fetch_API)'s {{domxref("Request.credentials")}} property now defaults to `"same-origin"` per the latest revision of the specification ([Firefox bug 1394399](https://bugzil.la/1394399)). - The {{domxref("Request.destination")}} property has been implemented ([Firefox bug 1402892](https://bugzil.la/1402892)). - The {{domxref("MutationObserver")}} option dictionary, `MutationObserverInit`, no longer has `false` as the default value of all of its Boolean properties. Now, only `childList` and `subtree` have default values (of `false` still). The other properties have no default values ([Firefox bug 973638](https://bugzil.la/973638)). -- The [Payment Request API](/en-US/docs/Web/API/Payment_Request_API) method {{domxref("PaymentRequest.show()")}} now supports using a {{jsxref("Promise")}} to let the client side code provide updated payment details prior to activating the payment interface ([Firefox bug 1441709](https://bugzil.la/1441709)). +- The [Payment Request API](/en-US/docs/Web/API/Payment_Request_API) method {{domxref("PaymentRequest.show()")}} now supports using a {{jsxref("Promise")}} to let the client-side code provide updated payment details prior to activating the payment interface ([Firefox bug 1441709](https://bugzil.la/1441709)). #### DOM events diff --git a/files/en-us/related/imsc/mapping_video_time_codes_to_imsc/index.md b/files/en-us/related/imsc/mapping_video_time_codes_to_imsc/index.md index 8e50ef2f00e57f2..4f81962d1c7034c 100644 --- a/files/en-us/related/imsc/mapping_video_time_codes_to_imsc/index.md +++ b/files/en-us/related/imsc/mapping_video_time_codes_to_imsc/index.md @@ -33,7 +33,7 @@ In a single second this is not a big deal. As you extend to a few minutes, howev 3600 (seconds in 1 hour) \* 1.001 (velocity) = 3603.6 real time seconds -This is especially important to understand with IMSC files, since all of the timings in the document represent real time values. For example, if you want to describe an event that synchronizes with 23.976fps video that begins at 01:00:00:00 time code in the video, and ends 1 second later, it would look like this: +This is especially important to understand with IMSC files, since all of the timings in the document represent real-time values. For example, if you want to describe an event that synchronizes with 23.976fps video that begins at 01:00:00:00 time code in the video, and ends 1 second later, it would look like this: `

Hello, I am Mork from Ork

` diff --git a/files/en-us/web/accessibility/guides/cognitive_accessibility/index.md b/files/en-us/web/accessibility/guides/cognitive_accessibility/index.md index 1d5f46f3955da55..9a0d7ee7608d3f3 100644 --- a/files/en-us/web/accessibility/guides/cognitive_accessibility/index.md +++ b/files/en-us/web/accessibility/guides/cognitive_accessibility/index.md @@ -224,7 +224,7 @@ Input Assistance guidelines aim to reduce the likelihood that users, especially ### Convey automated error detection -Users need to be alerted to the error and informed of what is wrong. If there is client side error detection, observe the following guidelines to make the error as effective as possible when conveyed to the user: +Users need to be alerted to the error and informed of what is wrong. If there is client-side error detection, observe the following guidelines to make the error as effective as possible when conveyed to the user: - The error must be described in the text. - Ensure that the error message is as specific as possible. diff --git a/files/en-us/web/accessibility/guides/understanding_wcag/operable/index.md b/files/en-us/web/accessibility/guides/understanding_wcag/operable/index.md index f1df832f7183073..dab3268af5e60d3 100644 --- a/files/en-us/web/accessibility/guides/understanding_wcag/operable/index.md +++ b/files/en-us/web/accessibility/guides/understanding_wcag/operable/index.md @@ -127,7 +127,7 @@ This guideline covers situations in which functionality may have a time limit. F

Exceptions to this are activities with time limits longer than 20 - hours, real time events (e.g., live multiplayer games), and any other + hours, real-time events (e.g., live multiplayer games), and any other activity that requires a time limit and would be invalidated if it were turned off.

diff --git a/files/en-us/web/api/cssfontfeaturevaluesrule/index.md b/files/en-us/web/api/cssfontfeaturevaluesrule/index.md index df556e09d1a9609..55d1a864c94c80a 100644 --- a/files/en-us/web/api/cssfontfeaturevaluesrule/index.md +++ b/files/en-us/web/api/cssfontfeaturevaluesrule/index.md @@ -20,19 +20,19 @@ This is convenient, because it allows the same name to be used of represent a se _Inherits properties from its ancestor {{domxref("CSSRule")}}._ - {{domxref("CSSFontFeatureValuesRule.annotation")}} {{experimental_inline}} - - : A user defined value definition and value that applies an alternate annotation of the font. + - : A user-defined value definition and value that applies an alternate annotation of the font. - {{domxref("CSSFontFeatureValuesRule.characterVariant")}} {{experimental_inline}} - - : A user defined value definition and value that applies stylistic alternatives for characters of the font. + - : A user-defined value definition and value that applies stylistic alternatives for characters of the font. - {{domxref("CSSFontFeatureValuesRule.fontFamily")}} - : A string that identifies the font family this rule applies to. - {{domxref("CSSFontFeatureValuesRule.ornaments")}} {{experimental_inline}} - - : A user defined value definition and value that applies alternative ornaments of the font. + - : A user-defined value definition and value that applies alternative ornaments of the font. - {{domxref("CSSFontFeatureValuesRule.styleset")}} {{experimental_inline}} - - : A user defined value definition and value that applies alternate style sets of the font. + - : A user-defined value definition and value that applies alternate style sets of the font. - {{domxref("CSSFontFeatureValuesRule.stylistic")}} {{experimental_inline}} - - : A user defined value definition and value that applies alternative glyphs of the font. + - : A user-defined value definition and value that applies alternative glyphs of the font. - {{domxref("CSSFontFeatureValuesRule.swash")}} {{experimental_inline}} - - : A user defined value definition and value that applies alternative swashes of the font. + - : A user-defined value definition and value that applies alternative swashes of the font. ## Instance methods diff --git a/files/en-us/web/api/htmlscriptelement/textcontent/index.md b/files/en-us/web/api/htmlscriptelement/textcontent/index.md index 010b093307f66ee..74fd6ef4f744fc4 100644 --- a/files/en-us/web/api/htmlscriptelement/textcontent/index.md +++ b/files/en-us/web/api/htmlscriptelement/textcontent/index.md @@ -54,7 +54,7 @@ scriptElement.textContent = untrustedCode; // shows the alert You can mitigate these issues by always assigning {{domxref("TrustedScript")}} objects instead of strings, and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive. This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) or reject the text before it is injected. -The behavior of the transformation function will depend on the specific use case that requires a user provided script. +The behavior of the transformation function will depend on the specific use case that requires a user-provided script. If possible you should lock the allowed scripts to exactly the code that you trust to run. If that is not possible, you might allow or block the use of certain functions within the provided string. diff --git a/files/en-us/web/api/server-sent_events/using_server-sent_events/index.md b/files/en-us/web/api/server-sent_events/using_server-sent_events/index.md index e7e2e28d1dcc19c..68c58b7fffe75b1 100644 --- a/files/en-us/web/api/server-sent_events/using_server-sent_events/index.md +++ b/files/en-us/web/api/server-sent_events/using_server-sent_events/index.md @@ -7,7 +7,7 @@ browser-compat: api.EventSource {{DefaultAPISidebar("Server Sent Events")}} -Developing a web application that uses [server-sent events](/en-US/docs/Web/API/Server-sent_events) is straightforward. You'll need a bit of code on the server to stream events to the front-end, but the client side code works almost identically to [websockets](/en-US/docs/Web/API/WebSockets_API) in part of handling incoming events. This is a one-way connection, so you can't send events from a client to a server. +Developing a web application that uses [server-sent events](/en-US/docs/Web/API/Server-sent_events) is straightforward. You'll need a bit of code on the server to stream events to the front-end, but the client-side code works almost identically to [websockets](/en-US/docs/Web/API/WebSockets_API) in part of handling incoming events. This is a one-way connection, so you can't send events from a client to a server. ## Receiving events from the server diff --git a/files/en-us/web/api/window/setinterval/index.md b/files/en-us/web/api/window/setinterval/index.md index c3a126000352fd6..2993d8762c3cb73 100644 --- a/files/en-us/web/api/window/setinterval/index.md +++ b/files/en-us/web/api/window/setinterval/index.md @@ -210,7 +210,7 @@ For example, the required CSP for your site might look like this: Content-Security-Policy: require-trusted-types-for 'script'; script-src '' 'trusted-types-eval' ``` -The behavior of the transformation function will depend on the specific use case that requires a user provided script. +The behavior of the transformation function will depend on the specific use case that requires a user-provided script. If possible you should lock the allowed scripts to exactly the code that you trust to run. If that is not possible, you might allow or block the use of certain functions within the provided string. diff --git a/files/en-us/web/api/window/settimeout/index.md b/files/en-us/web/api/window/settimeout/index.md index b31a3cafd198b06..3186027fd9b4d23 100644 --- a/files/en-us/web/api/window/settimeout/index.md +++ b/files/en-us/web/api/window/settimeout/index.md @@ -406,7 +406,7 @@ For example, the required CSP for your site might look like this: Content-Security-Policy: require-trusted-types-for 'script'; script-src '' 'trusted-types-eval' ``` -The behavior of the transformation function will depend on the specific use case that requires a user provided script. +The behavior of the transformation function will depend on the specific use case that requires a user-provided script. If possible you should lock the allowed scripts to exactly the code that you trust to run. If that is not possible, you might allow or block the use of certain functions within the provided string. diff --git a/files/en-us/web/javascript/reference/global_objects/eval/index.md b/files/en-us/web/javascript/reference/global_objects/eval/index.md index 4ba3e5417916c29..7bfa618c7bced93 100644 --- a/files/en-us/web/javascript/reference/global_objects/eval/index.md +++ b/files/en-us/web/javascript/reference/global_objects/eval/index.md @@ -376,7 +376,7 @@ For example, the required CSP for your site might look like this: Content-Security-Policy: require-trusted-types-for 'script'; script-src '' 'trusted-types-eval' ``` -The behavior of the transformation function implemented in your trusted types policy depends on the specific use case that requires a user provided script. If possible, you should lock the allowed scripts to exactly the code that you trust to run. If that is not possible, you might allow or block the use of certain functions within the provided input. +The behavior of the transformation function implemented in your trusted types policy depends on the specific use case that requires a user-provided script. If possible, you should lock the allowed scripts to exactly the code that you trust to run. If that is not possible, you might allow or block the use of certain functions within the provided input. ## Examples diff --git a/files/en-us/web/javascript/reference/global_objects/function/function/index.md b/files/en-us/web/javascript/reference/global_objects/function/function/index.md index 9637fb9aae16f76..d4b620c87f21846 100644 --- a/files/en-us/web/javascript/reference/global_objects/function/function/index.md +++ b/files/en-us/web/javascript/reference/global_objects/function/function/index.md @@ -119,7 +119,7 @@ For example, the required CSP for your site might look like this: Content-Security-Policy: require-trusted-types-for 'script'; script-src '' 'trusted-types-eval' ``` -The behavior of the transformation function depends on the specific use case that requires a user provided script. If possible, you should lock the allowed scripts to exactly the code that you trust to run. If that is not possible, you might allow or block the use of certain functions within the provided string. +The behavior of the transformation function depends on the specific use case that requires a user-provided script. If possible, you should lock the allowed scripts to exactly the code that you trust to run. If that is not possible, you might allow or block the use of certain functions within the provided string. ## Examples diff --git a/files/en-us/web/javascript/reference/statements/import/index.md b/files/en-us/web/javascript/reference/statements/import/index.md index 55facb7cff7ea8a..9c9481958453a49 100644 --- a/files/en-us/web/javascript/reference/statements/import/index.md +++ b/files/en-us/web/javascript/reference/statements/import/index.md @@ -31,7 +31,7 @@ import "module-name"; - `defaultExport` - : Name that will refer to the default export from the module. Must be a valid JavaScript identifier. - `module-name` - - : The module to import from. Only single quoted and double quoted string literals are allowed. The evaluation of the specifier is host-specified. Most hosts align with browsers and resolve the specifiers as URLs relative to the current module URL (see [`import.meta.url`](/en-US/docs/Web/JavaScript/Reference/Operators/import.meta)). Node, bundlers, and other non-browser environments often define their own features on top of this, so you should find documentation for them to understand the exact rules. The [module specifier resolution](#module_specifier_resolution) section also has more information. + - : The module to import from. Only single- and double-quoted string literals are allowed. The evaluation of the specifier is host-specified. Most hosts align with browsers and resolve the specifiers as URLs relative to the current module URL (see [`import.meta.url`](/en-US/docs/Web/JavaScript/Reference/Operators/import.meta)). Node, bundlers, and other non-browser environments often define their own features on top of this, so you should find documentation for them to understand the exact rules. The [module specifier resolution](#module_specifier_resolution) section also has more information. - `name` - : Name of the module object that will be used as a kind of namespace when referring to the imports. Must be a valid JavaScript identifier. - `exportN` diff --git a/files/en-us/web/security/authentication/passkeys/index.md b/files/en-us/web/security/authentication/passkeys/index.md index 5cf79e20f964bf5..75112229ee228fc 100644 --- a/files/en-us/web/security/authentication/passkeys/index.md +++ b/files/en-us/web/security/authentication/passkeys/index.md @@ -48,7 +48,7 @@ Next, the RP's front-end code calls {{domxref("CredentialsContainer.create()")}} - **Challenge**: The [challenge](#challenges) generated by the RP's server. This helps protect against {{glossary("replay attack", "replay attacks")}}. -- **Website information**: A human readable name and ID for the RP that will be associated with the new passkey. The ID determines the [scope](#passkey_scope) of the resulting passkey. +- **Website information**: A human-readable name and ID for the RP that will be associated with the new passkey. The ID determines the [scope](#passkey_scope) of the resulting passkey. - **User information**: Information about the user that will be associated with the new passkey, including a human-readable display name, an account identifier, and a human-readable account identifier such as an email address or username. From 40b0a3c467b2ba939e4236b4a7f51efe9f21495a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 3 Sep 2026 11:42:35 +0200 Subject: [PATCH 2/6] chore(deps): bump fast-uri from 3.1.5 to 3.1.7 (#45471) Bumps [fast-uri](https://github.com/fastify/fast-uri) from 3.1.5 to 3.1.7. - [Release notes](https://github.com/fastify/fast-uri/releases) - [Commits](https://github.com/fastify/fast-uri/compare/v3.1.5...v3.1.7) --- updated-dependencies: - dependency-name: fast-uri dependency-version: 3.1.7 dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index c39534b0e454ac0..5a61247cfc35206 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4088,9 +4088,9 @@ "license": "MIT" }, "node_modules/fast-uri": { - "version": "3.1.5", - "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.5.tgz", - "integrity": "sha512-gHwA1O9LDIcKunMKhObS/HimwtehO1nPUECKAu5TpKgaO19fcWEl4bliWe1jWxVFvIXztJjjQ4L8XQ1EU9f7Jw==", + "version": "3.1.7", + "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.7.tgz", + "integrity": "sha512-dOvZVzjdZdz7phd9v6jCbwxrBW3fK6n8Rc0CtdmM4bumzMnxywBYhuph6J819RRw/ku+rLbelwfMunktuzVVHg==", "dev": true, "funding": [ { From 113c012aab0a694ee2c489ce9b0dab8c94edf36c Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Thu, 3 Sep 2026 11:24:09 +0100 Subject: [PATCH 3/6] 45181 view timeline ff release (#45436) * added experimental release for view-timeline * added experimental note to 155 for view-timeline * Update files/en-us/mozilla/firefox/experimental_features/index.md Co-authored-by: Dipika Bhattacharya * update experimental 155 release note --------- Co-authored-by: Dipika Bhattacharya --- .../mozilla/firefox/experimental_features/index.md | 14 ++++++++++++++ files/en-us/mozilla/firefox/releases/155/index.md | 4 ++++ 2 files changed, 18 insertions(+) diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index fbaa5979cf291f1..697a2b7fab65c29 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -435,6 +435,20 @@ The {{cssxref("text-decoration-inset")}} CSS property now supports percentages a - `layout.css.text-decoration-inset-percentage.enabled` - : Set to `true` to enable. +### `view-timeline` includes `view-timeline-inset` + +The {{cssxref("view-timeline")}} shorthand property now supports the {{cssxref("view-timeline-inset")}} property. The shorthand lets you specify start and/or end inset (or outset) values to adjust the position of the view progress timeline. ([Firefox bug 2046602](https://bugzil.la/2046602)). + +| Release channel | Version added | Enabled by default? | +| ----------------- | ------------- | ------------------- | +| Nightly | 155 | Yes | +| Developer Edition | 155 | No | +| Beta | 155 | No | +| Release | 155 | No | + +- `layout.css.scroll-driven-animations.enabled` + - : Set to `true` to enable. + ## SVG **No experimental features in this release cycle.** diff --git a/files/en-us/mozilla/firefox/releases/155/index.md b/files/en-us/mozilla/firefox/releases/155/index.md index 28532beba224ba5..83e83a6473fcdf5 100644 --- a/files/en-us/mozilla/firefox/releases/155/index.md +++ b/files/en-us/mozilla/firefox/releases/155/index.md @@ -179,3 +179,7 @@ You can find more such features on the [Experimental features](/en-US/docs/Mozil - **`border-area` value for `background-clip`**: `layout.css.background-clip.border-area.enabled` The [`border-area`](/en-US/docs/Web/CSS/Reference/Properties/background-clip#border-area) value of the {{cssxref("background-clip")}} CSS property clips the background to the area painted by the element's border, which makes it possible to use a gradient or image as a border. ([Firefox bug 2045230](https://bugzil.la/2045230)). + +- **`view-timeline` includes `view-timeline-inset`**: `layout.css.scroll-driven-animations.enabled` + + The {{cssxref("view-timeline")}} shorthand property now supports the {{cssxref("view-timeline-inset")}} property. The shorthand lets you specify start and/or end inset (or outset) values to adjust the position of the view progress timeline. ([Firefox bug 2046602](https://bugzil.la/2046602)). From 0daae80dae181e8156f76439b0df5749f1501bb3 Mon Sep 17 00:00:00 2001 From: natiD1 Date: Thu, 3 Sep 2026 15:13:29 +0300 Subject: [PATCH 4/6] Update advanced form styling for accent-color, file pickers and number inputs (#45453) * Update advanced form styling for accent-color, file pickers and number inputs Addresses three issues on the Advanced form styling page, which a maintainer asked to be fixed together. Adds an accent-color section for checkboxes and radio buttons. The page went straight to `appearance: none` and rebuilding the control by hand, with no mention of the one-property option that covers the common case of only wanting a different color. Corrects the claim that the file picker button is "completely unstylable". It has been stylable with ::file-selector-button for some years. The label technique the page already described is kept, since it is still the way to control the text beside the button, which CSS cannot reach. Replaces the note suggesting `` as a way to avoid the number spinner. Switching type to lose a spinner changes the meaning of the field and what the browser validates. Recommends `inputmode="numeric"` with a pattern attribute instead, matching the guidance already on the `` page. Also notes on Styling web forms that the file picker button is stylable, since that page lists `` among the controls whose internals CSS cannot reach. * Apply review feedback on advanced form styling Renames the accent-color heading to cover form controls generally rather than just checkboxes and radio buttons, since the property also tints range sliders, and renames the live sample to match. Adds a range slider to that sample so it demonstrates the three controls the text now names. Rewrites the accent-color intro and closing paragraphs, the opening of the appearance section, the number input note and the file input opening, following the suggestions on the pull request. Turns the ::file-selector-button snippet into a live example of its own, so the declaration can be seen taking effect and is no longer mistakable for part of the styled file picker example further down. * grammar nit * nit Reworded the explanation regarding styling checkboxes and radio buttons for clarity. * nits --------- Co-authored-by: Chris Mills --- .../forms/advanced_form_styling/index.md | 82 ++++++++++++++++--- .../forms/styling_web_forms/index.md | 2 + 2 files changed, 74 insertions(+), 10 deletions(-) diff --git a/files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md b/files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md index dd687ac07292f7b..a216b6970ef125c 100644 --- a/files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md +++ b/files/en-us/learn_web_development/extensions/forms/advanced_form_styling/index.md @@ -186,9 +186,50 @@ input[type="search"]:not(:focus, :active)::-webkit-search-cancel-button { } ``` +### Setting form control color tints using `accent-color` + +If you only want to style the primary tint color of checkboxes, radio buttons, or range sliders, the {{cssxref("accent-color")}} will do it without requiring `appearance: none`. This is useful for basic styling cases, as the controls maintain their OS-level styling, but with an altered main color. + +```html live-sample___accent-color +
+
+ Fruit preferences + +

+ +

+

+ +

+

+ +

+
+
+``` + +```css live-sample___accent-color +input { + accent-color: rebeccapurple; +} +``` + +{{EmbedLiveSample("accent-color", '100%', 200)}} + +Because the controls keep their native appearance, they follow platform conventions — including forced-colors modes — with no further work on your part. In addition, the browser automatically chooses a complementary secondary color with enough contrast to the `accent-color` to keep the control accessible. Play with the above live example and set some light and dark `accent-color` values to see the effects. + ### Styling checkboxes and radio buttons using `appearance` -Styling a checkbox or a radio button is tricky by default. The sizes of checkbox and radio button default styles are not meant to be changed, and browsers react very differently when you try. Some increase the size of the control, and some keep the control the same size and add extra space around it. +Further styling of a checkbox or a radio button requires more effort. The default sizes of checkboxes and radio buttons were not meant to be changed, and browsers react very differently when you try. Some increase the control size, and some keep it the same and add extra space around the control. A much better approach is to remove the default appearance of checkboxes and radio buttons altogether with {{cssxref("appearance", "appearance: none;")}}, and then add your own styles to their various states. @@ -558,7 +599,7 @@ The date/time input types ([`datetime-local`](/en-US/docs/Web/HTML/Reference/Ele However, the internal parts of the control (e.g., the popup calendar that you use to pick a date, the spinner that you can use to increment/decrement values) are not stylable at all, and you can't get rid of them using `appearance: none;`. If you really need full control over the styling, you'll have to either use a library to generate a custom control or build your own. > [!NOTE] -> It is worth mentioning [``](/en-US/docs/Web/HTML/Reference/Elements/input/number) here too — this also has a spinner that you can use to increment/decrement values, so potentially suffers from the same problem. However, in the case of the `number` type the data being collected is simpler, and it is easy to just use a `tel` input type instead, which has the appearance of `text`, but displays the numeric keypad in devices with touch keyboards. +> [``](/en-US/docs/Web/HTML/Reference/Elements/input/number) has a spinner too, and its internal parts are no easier to style. If you want to remove the spinner, use [``](/en-US/docs/Web/HTML/Reference/Elements/input/text) with [`inputmode="numeric"`](/en-US/docs/Web/HTML/Reference/Global_attributes/inputmode) set to display a numeric keypad on devices with touch keyboards and a [`pattern`](/en-US/docs/Web/HTML/Reference/Attributes/pattern) attribute that limits input values to a number. See also [`` > Accessibility](/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility). ### Range input types @@ -593,11 +634,32 @@ However, a custom solution is the only way to get anything significantly differe ### File input types -Inputs of type file are generally OK — as you saw in our example, it is fairly easy to create something that fits in OK with the rest of the page — the output line that is part of the control will inherit the parent font if you tell the input to do so, and you can style the custom list of file names and sizes in any way you want; we created it after all. +Inputs of type file are generally OK — it is fairly easy to create something that fits in OK with the rest of the page. The output line that is part of the control will inherit the parent font if you tell the input to do so, and you can style the custom list of file names and sizes in any way you want. -The only problem with file pickers is that the button you press to open the file picker is completely unstylable — it can't be sized or colored, and it won't even accept a different font. +The button you press to open the file picker can be styled with the {{cssxref("::file-selector-button")}} pseudo-element, which accepts the same properties as any other button: -One way around this is to take advantage of the fact that if you have a label associated with a form control, clicking the label will activate the control. So you could hide the actual form input using something like this: +```html live-sample___file-selector-button +
+ + +
+``` + +```css live-sample___file-selector-button +input[type="file"]::file-selector-button { + border: 1px solid darkgrey; + border-radius: 5px; + background: linear-gradient(to bottom, #eeeeee, #cccccc); + padding: 0.25em 0.75em; + font: inherit; +} +``` + +{{EmbedLiveSample("file-selector-button", '100%', 100)}} + +You can't style the text beside the button — the "no file chosen" message — or the displayed filename once chosen. The browser generates that text and doesn't expose it to CSS. To work around this problem, use the control's label and the fact that clicking the label activates the control. + +You can hide the actual form input using something like this: ```css input[type="file"] { @@ -730,18 +792,18 @@ function returnFileSize(number) { {{EmbedLiveSample("styled-file-picker", '100%', 200)}} -You can also press the **Play** button to run the example in MDN Playground and edit the source code. +You can also press the **Play** button to run the example in MDN Playground and check out the full source code. ### Meters and progress bars -[``](/en-US/docs/Web/HTML/Reference/Elements/meter) and [``](/en-US/docs/Web/HTML/Reference/Elements/progress) are possibly the worst of the lot. As you saw in the earlier example, we can set them to the desired width relatively accurately. But beyond that, they are really difficult to style in any way. They don't handle height settings consistently between each other and between browsers, you can color the background but not the foreground bar, and setting `appearance: none` on them makes things worse, not better. +[``](/en-US/docs/Web/HTML/Reference/Elements/meter) and [``](/en-US/docs/Web/HTML/Reference/Elements/progress) are possibly the worst of the lot. As you saw in the earlier example, we can set them to the desired width relatively accurately. But beyond that, they are really difficult to style. They don't handle height settings consistently between each other and between browsers, you can color the background but not the foreground bar, and setting `appearance: none` on them makes things worse, not better. -It is easier to create your own custom solution for these features if you want to control the styling, or use a third-party solution such as [progressbar.js](https://kimmobrunfeldt.github.io/progressbar.js/#examples). +It is easier to create your own custom solution to control the styling for these features, or use a third-party solution such as [progressbar.js](https://kimmobrunfeldt.github.io/progressbar.js/#examples). ## Summary -While there are still difficulties using CSS with HTML forms, there are ways to get around many of the problems. There are no clean, universal solutions, but modern browsers offer new possibilities. For now, the best solution is to learn more about the way the different browsers support CSS when applied to HTML form controls. +Styling HTML forms presents some challenges; there are however ways to get around many of them. There are no clean, universal solutions, but modern browsers offer new possibilities. For now, the best solution is to learn more about how different browsers support CSS when applied to HTML form controls. -In the next article of this module, we will explore creating [fully-customized `` elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select) using the dedicated, modern HTML and CSS features available for this purpose. {{PreviousMenuNext("Learn_web_development/Extensions/Forms/Styling_web_forms", "Learn_web_development/Extensions/Forms/Customizable_select", "Learn_web_development/Extensions/Forms")}} diff --git a/files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md b/files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md index 4d229f64bc07fdb..0e4e84fcc8ac4c5 100644 --- a/files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md +++ b/files/en-us/learn_web_development/extensions/forms/styling_web_forms/index.md @@ -62,6 +62,8 @@ The article [Advanced form styling](/en-US/docs/Learn_web_development/Extensions - Date-related controls such as [``](/en-US/docs/Web/HTML/Reference/Elements/input/datetime-local) - [``](/en-US/docs/Web/HTML/Reference/Elements/input/range) - [``](/en-US/docs/Web/HTML/Reference/Elements/input/file) + > [!NOTE] + > The button that opens the file picker can be styled with {{cssxref("::file-selector-button")}}. The text beside it, which names the selected file, cannot. - Elements involved in creating dropdown widgets, including {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} and {{HTMLElement("datalist")}}. > [!NOTE] > Some browsers now support [Customizable select elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select), a set of HTML and CSS features that together enable full customization of `