RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/whatwg/html/issues/7050 below:

Define rendering rules for all widgets in their native appearance and primitive appearance + pseudo-elements · Issue #7050 · whatwg/html · GitHub

Follow-up from #7839.

Define the expected rendering for the native appearance and the primitive appearance for:

button, input type=button/reset/submit
input type=text/tel/url/email/search/password + pseudo-elements
input type=date/month/week/time/datetime-local + pseudo-elements
input type=number + pseudo-elements
input type=range + pseudo-elements
input type=color + pseudo-elements
input type=checkbox/radio + pseudo-elements
input type=file + pseudo-elements
meter + pseudo-elements
progress + pseudo-elements
select as a listbox + optgroup + option
- [selectors] Add pseudo-classes for <select> being a drop-down box vs a list box w3c/csswg-drafts#7422
- HTML: test default styles for <select multiple> web-platform-tests/wpt#35801
select as a drop-down box + pseudo-elements
textarea

Also, define the expected rendering for:

select as a drop-down box in the devolved state or appearance: menulist-button

I think various pseudo-elements that browsers support are necessary to specify the native appearance, but right now only a few are standardized.

The relevant pseudo-classes and pseudo-elements I see in Chromium's html.css are:

input::-webkit-textfield-decoration-container
input::-webkit-clear-button
input[type="search" i]::-webkit-search-cancel-button
input[type="search" i]::-webkit-search-results-decoration
input::-webkit-inner-spin-button
::-webkit-input-placeholder
input::-internal-input-suggested
textarea::-internal-input-suggested
input[type="password" i]::-internal-reveal
input[type="file" i]::-webkit-file-upload-button
input[type="range" i]::-webkit-slider-container
input[type="range" i]::-webkit-media-slider-container
input[type="range" i]:-internal-has-datalist::-webkit-slider-container
input[type="range" i]::-webkit-slider-runnable-track
input[type="range" i]::-webkit-slider-thumb
input[type="range" i]::-webkit-media-slider-thumb
input[type="color" i]::-webkit-color-swatch-wrapper
input[type="color" i]::-webkit-color-swatch
input::-webkit-calendar-picker-indicator
select:-internal-list-box
meter::-webkit-meter-inner-element
meter::-webkit-meter-inner-element:-internal-shadow-host-has-appearance
meter::-internal-fallback:-internal-shadow-host-has-appearance
meter::-webkit-meter-bar
meter::-webkit-meter-optimum-value
meter::-webkit-meter-suboptimum-value
meter::-webkit-meter-even-less-good-value
progress::-webkit-progress-inner-element
progress::-webkit-progress-bar
progress::-webkit-progress-value
input::-webkit-datetime-edit-ampm-field
input::-webkit-datetime-edit-day-field
input::-webkit-datetime-edit-hour-field
input::-webkit-datetime-edit-millisecond-field
input::-webkit-datetime-edit-minute-field
input::-webkit-datetime-edit-month-field
input::-webkit-datetime-edit-second-field
input::-webkit-datetime-edit-week-field
input::-webkit-datetime-edit-year-field

(Are ::webkit-media-slider-container and ::webkit-media-slider-thumb used in the <video controls> shadow tree?)

The ::-internal-* ones are not exposed to author CSS and so don't need to be standardized (but expected rendering can still be defined in prose). I think all of the others can be used by web developers.

Gecko's forms.css:

::file-selector-button
::placeholder
::-moz-text-control-editing-root
::-moz-text-control-preview
:placeholder-shown
:autofill
::-moz-display-comboboxcontrol-frame
::-moz-dropdown-list
::-moz-color-swatch
::-moz-button-content
::-moz-progress-bar
::-moz-meter-bar
:-moz-meter-optimum::-moz-meter-bar
:-moz-meter-sub-optimum::-moz-meter-bar
:-moz-meter-sub-sub-optimum::-moz-meter-bar
input[type=range]::-moz-range-progress
input[type=number]::-moz-number-spin-box
input[type=number]::-moz-number-spin-up
input[type=number]::-moz-number-spin-down
input::-moz-search-clear-button
input::-moz-reveal

::file-selector-button and ::placeholder are defined in https://drafts.csswg.org/css-pseudo/

:placeholder-shown and :autofill are defined in HTML.

Gecko also has a -moz-default-appearance property, but I believe it's not exposed to author CSS.

(Open issues for css-pseudo: https://github.com/w3c/csswg-drafts/issues?q=is%3Aopen+label%3Acss-pseudo-4%2Ccss-pseudo-5 )

cc @whatwg/css @whatwg/forms

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4