Working Draft · css-ui
25 properties defined by this specification, 19 of them known to at least one browser (the others are badged Not in any browser yet).
Modern CSS features in this module: accent-color, Customizable <select>, caret-shape, interactivity, Interest invokers, outline, resize (CSS property), window-drag.
-webkit-appearance No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
none | auto | base | base-select | <compat-auto> | <compat-special>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
-webkit-user-select No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
auto | text | none | contain | allFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
accent-color MDN The accent-color CSS property sets the accent color for user-interface controls generated by some elements.
.container > div {
display: flex;
align-items: center;
}
#example-element {
width: 40px;
height: 40px;
}
#example-label {
margin-left: 10px;
font-size: x-large;
}<section class="default-example container" id="default-example">
<div>
<input checked id="example-element" type="checkbox" />
<label for="example-element" id="example-label">Example Label</label>
</div>
</section>auto | <color>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 93 |
|---|---|
| Edge | 93 |
| Firefox | 92 |
| Safari | 26.2 |
| Chrome Android | 93 |
| Safari iOS | 26.2 |
First version with support, from MDN browser-compat-data.
appearance MDN The appearance CSS property specifies the rendered appearance of replaced UI widget elements such as form controls. Most commonly, such elements are given native, platform-specific styling based on the operating system's theme, or a primitive appearance with styles that can be overridden using CSS.
input,
button {
appearance: inherit;
}<section id="default-example">
<div class="background" id="example-element">
<input type="search" value="search" aria-label="unlabeled search" />
<input type="checkbox" aria-label="unlabeled checkbox" />
<input type="radio" aria-label="unlabeled radio button" />
<button>Button</button>
</div>
</section>none | auto | base | base-select | <compat-auto> | <compat-special>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 84 |
|---|---|
| Edge | 84 |
| Firefox | 80 |
| Safari | 15.4 |
| Chrome Android | 84 |
| Safari iOS | 15.4 |
First version with support, from MDN browser-compat-data.
caret MDN The caret CSS shorthand property sets the appearance and behavior of the insertion caret in a single declaration.
div {
text-align: left;
}
#example-element {
font-size: 1.2rem;
padding: 8px;
width: 300px;
}<section class="default-example container" id="default-example">
<div>
<label for="example-element">Edit text field:</label>
<input id="example-element" type="text" value="Sample text" />
</div>
</section><'caret-color'> || <'caret-animation'> || <'caret-shape'>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
caret-color, caret-animation, caret-shapecaret-animation MDN The caret-animation CSS property is used to enable or disable the blinking behavior of the insertion caret, the visible marker that appears in editable elements to indicate where the next character will be inserted or deleted.
p {
caret-color: red;
}
p:first-of-type {
caret-animation: auto;
}
p:last-of-type {
caret-animation: manual;
}<p contenteditable="true">
My caret animates because <code>caret-animation</code> is set to
<code>auto</code>.
</p>
<p contenteditable="true">
My caret doesn't animate because <code>caret-animation</code> is set to
<code>manual</code>.
</p>auto | manualFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 140 |
|---|---|
| Edge | 140 |
| Firefox | No |
| Safari | No |
| Chrome Android | 140 |
| Safari iOS | No |
First version with support, from MDN browser-compat-data.
caret-color MDN The caret-color CSS property sets the color of the insertion caret, sometimes referred to as the text input cursor. This is the visible marker appearing at the insertion point where the next character typed will be added or where the next character deleted will be removed.
#example-element {
font-size: 1.2rem;
}<section class="default-example container" id="default-example">
<div>
<p>Enter text in the field to see the caret:</p>
<p><input id="example-element" type="text" /></p>
</div>
</section>auto | <color> [auto | <color>]?Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 57 |
|---|---|
| Edge | 79 |
| Firefox | 53 |
| Safari | 11.1 |
| Chrome Android | 57 |
| Safari iOS | 11.3 |
First version with support, from MDN browser-compat-data.
caret-shape MDN The caret-shape CSS property sets the shape of the insertion caret, the visible marker that appears in editable elements to indicate where the next character will be inserted or deleted.
div {
text-align: left;
}
#example-element {
font-size: 1.2rem;
padding: 8px;
width: 300px;
}<section class="default-example container" id="default-example">
<div>
<label for="example-element">Edit text field:</label>
<input id="example-element" type="text" value="Sample text" />
</div>
</section>auto | bar | block | underscoreFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 144 |
|---|---|
| Edge | 144 |
| Firefox | No |
| Safari | No |
| Chrome Android | 144 |
| Safari iOS | No |
First version with support, from MDN browser-compat-data.
cursor MDN The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.
#example-element {
display: flex;
background-color: #1766aa;
color: white;
height: 180px;
width: 360px;
justify-content: center;
align-items: center;
font-size: 14pt;
padding: 5px;
}<section class="default-example container" id="default-example">
<div id="example-element">
Move over this element to see the cursor style.
</div>
</section>[<cursor-image>,]* <cursor-predefined>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 1 |
|---|---|
| Edge | 12 |
| Firefox | 1 |
| Safari | 1.2 |
| Chrome Android | 18 |
| Safari iOS | 13.4 |
First version with support, from MDN browser-compat-data.
interactivity MDN The interactivity CSS property specifies whether an element and its descendant nodes are set to be inert.
.inert {
interactivity: inert;
background-color: lightpink;
}<p>
<label>
This input is interactive:
<input type="text" name="one" value="editable" />
</label>
</p>
<p>
<label>
This input is not interactive:
<input type="text" name="two" value="Not editable" class="inert" />
</label>
</p>auto | inertFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 135 |
|---|---|
| Edge | 135 |
| Firefox | No |
| Safari | No |
| Chrome Android | 135 |
| Safari iOS | No |
First version with support, from MDN browser-compat-data.
interest-delay MDN The interest-delay CSS property specifies the delay between the user showing interest in an interest invoker element and the HTMLElement.interest_event event firing, and the delay between the user losing interest and the HTMLElement.loseinterest_event event firing.
.delay {
interest-delay: 1s 2s;
}<button interestfor="mypopover">Button</button>
<p id="mypopover" popover>Hover tooltip</p>
<form>
<input type="checkbox" id="apply-delay" />
<label for="apply-delay">
Apply an <code>interest-delay</code> of <code>1s 2s</code>
</label>
</form>const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
btn.classList.toggle("delay");
});<'interest-delay-start'>{1,2}Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
interest-delay-start, interest-delay-end| Chrome | 142 |
|---|---|
| Edge | 142 |
| Firefox | No |
| Safari | No |
| Chrome Android | 142 |
| Safari iOS | No |
First version with support, from MDN browser-compat-data.
interest-delay-end MDN The interest-delay-end CSS property specifies the delay between the user losing interest in an interest invoker element and the HTMLElement.loseinterest_event event firing.
.delay {
interest-delay-end: 2s;
}<button interestfor="mypopover">Button</button>
<p id="mypopover" popover>Hover tooltip</p>
<form>
<input type="checkbox" id="apply-delay" />
<label for="apply-delay">
Apply an <code>interest-delay-end</code> of <code>2s</code>
</label>
</form>const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
btn.classList.toggle("delay");
});normal | <time>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 142 |
|---|---|
| Edge | 142 |
| Firefox | No |
| Safari | No |
| Chrome Android | 142 |
| Safari iOS | No |
First version with support, from MDN browser-compat-data.
interest-delay-start MDN The interest-delay-start CSS property specifies the delay between the user showing interest in an interest invoker element and the HTMLElement.interest_event event firing.
.delay {
interest-delay-start: 2s;
}<button interestfor="mypopover">Button</button>
<p id="mypopover" popover>Hover tooltip</p>
<form>
<input type="checkbox" id="apply-delay" />
<label for="apply-delay">
Apply an <code>interest-delay-start</code> of <code>2s</code>
</label>
</form>const btn = document.querySelector("button");
const checkbox = document.querySelector("input");
checkbox.addEventListener("change", () => {
btn.classList.toggle("delay");
});normal | <time>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 142 |
|---|---|
| Edge | 142 |
| Firefox | No |
| Safari | No |
| Chrome Android | 142 |
| Safari iOS | No |
First version with support, from MDN browser-compat-data.
nav-down No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
auto | <id> [ current | root | <target-name> ]?Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
nav-left No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
auto | <id> [ current | root | <target-name> ]?Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
nav-right No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
auto | <id> [ current | root | <target-name> ]?Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
nav-up No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
auto | <id> [ current | root | <target-name> ]?Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
outline MDN The outline CSS shorthand property sets the style, color, and width of an element's outline.
#example-element {
padding: 0.75rem;
width: 80%;
height: 100px;
}<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section><'outline-width'> || <'outline-style'> || <'outline-color'>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
outline-width, outline-style, outline-color| Chrome | 94 |
|---|---|
| Edge | 94 |
| Firefox | 88 |
| Safari | 16.4 |
| Chrome Android | 94 |
| Safari iOS | 16.4 |
First version with support, from MDN browser-compat-data.
outline-color MDN The outline-color CSS property sets the color of an element's outline.
#example-element {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section>auto | <'border-top-color'>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 1 |
|---|---|
| Edge | 12 |
| Firefox | 1.5 |
| Safari | 1.2 |
| Chrome Android | 18 |
| Safari iOS | 1 |
First version with support, from MDN browser-compat-data.
outline-offset MDN The outline-offset CSS property sets the amount of space between an outline and the edge or border of an element.
#example-element {
border: 2px solid crimson;
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section><length>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 1 |
|---|---|
| Edge | 15 |
| Firefox | 1.5 |
| Safari | 1.2 |
| Chrome Android | 18 |
| Safari iOS | 1 |
First version with support, from MDN browser-compat-data.
outline-style MDN The outline-style CSS property sets the style of an element's outline. An outline is a line that is drawn around an element, outside the border.
#example-element {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section>auto | <outline-line-style>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 1 |
|---|---|
| Edge | 12 |
| Firefox | 1.5 |
| Safari | 1.2 |
| Chrome Android | 18 |
| Safari iOS | 1 |
First version with support, from MDN browser-compat-data.
outline-width MDN The CSS outline-width property sets the thickness of an element's outline. An outline is a line that is drawn around an element, outside the border.
#example-element {
outline: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
This is a box with an outline around it.
</div>
</section><line-width>Formal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 1 |
|---|---|
| Edge | 12 |
| Firefox | 1.5 |
| Safari | 1.2 |
| Chrome Android | 18 |
| Safari iOS | 1 |
First version with support, from MDN browser-compat-data.
resize MDN The resize CSS property sets whether an element is resizable, and if so, in which directions.
#example-element {
background: linear-gradient(135deg, cyan 0%, cyan 94%, white 95%);
border: 3px solid #c5c5c5;
overflow: auto;
width: 250px;
height: 250px;
font-weight: bold;
color: black;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}<section class="default-example" id="default-example">
<div id="example-element">Try resizing this element.</div>
</section>none | both | horizontal | vertical | block | inlineFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 1 |
|---|---|
| Edge | 79 |
| Firefox | 4 |
| Safari | 3 |
| Chrome Android | 18 |
| Safari iOS | No |
First version with support, from MDN browser-compat-data.
user-select MDN The user-select CSS property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes.
#example-element {
font-size: 1.5rem;
}<section id="default-example">
<p id="example-element">Try to select this text</p>
</section>auto | text | none | contain | allFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 54 |
|---|---|
| Edge | 79 |
| Firefox | 69 |
| Safari | Preview |
| Chrome Android | 54 |
| Safari iOS | 3 (-webkit- prefix) |
First version with support, from MDN browser-compat-data.
window-drag No prose in the spec's definition and no MDN page yet: the spec link below is the only description.
none | moveFormal grammar from the specification, as webref extracts it: the latest level's definition, sometimes ahead of what browsers implement.
| Chrome | 152 |
|---|---|
| Edge | 152 |
| Firefox | No |
| Safari | No |
| Chrome Android | No |
| Safari iOS | No |
First version with support, from MDN browser-compat-data.