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

Showing content from https://developer.mozilla.org/en-US/docs/Web/CSS/appearance below:

appearance - CSS | MDN

Baseline Widely available *

The appearance CSS property is used to display UI elements with platform-specific styling, based on the operating system's theme.

<section id="default-example">
  <div class="background">
    <button id="example-element">button</button>
  </div>
</section>

.background {
  display: flex;
  place-content: center;
  place-items: center;
  width: 150px;
  height: 150px;
  background-color: white;
}

Before standardization, this property allowed elements to be shown as widgets, such as buttons or check boxes. It was considered a misfeature and authors are encouraged to use only standard keywords now.

Note: If you wish to use this property on websites, you should test it very carefully. Although it is supported in most modern browsers, its implementation varies. In older browsers, even the keyword none does not have the same effect on all form elements across different browsers, and some do not support it at all. The differences are smaller in the newest browsers.

/* CSS Basic User Interface Module Level 4 values */
appearance: none;
appearance: auto;
appearance: menulist-button;
appearance: textfield;
appearance: base-select;

/* Global values */
appearance: inherit;
appearance: initial;
appearance: revert;
appearance: revert-layer;
appearance: unset;

/* <compat-auto> values have the same effect as 'auto' */
appearance: button;
appearance: checkbox;

For the following keywords, the user agent selects the appropriate styling based on the element. Some examples are provided, but the list is not exhaustive.

none

If the element is a widget (native form control), it will be forced to use a standardized primitive appearance instead of a platform-native or operating system specific appearance, supporting the usual rules of CSS. This value has no effect on non-widget elements, including replaced elements like <img> and <video>.

auto

Acts as none on elements with no special styling.

base-select

Opts the <select> element and the ::picker(select) pseudo-element into the browser-defined default (base) styles and behavior for customizable select elements.

Note: The specification currently defines the base value, which is intended to apply base browser styles more generally for UI elements they are available for. However, this is not currently supported in any browser.

<compat-special>

One of menulist-button or textfield. Both of these values are equivalent to auto on elements with no special styling.

<compat-auto>

Possible values are button, checkbox, listbox, menulist, meter, progress-bar, push-button, radio, searchfield, slider-horizontal, square-button, and textarea. Keywords which are the equivalent of auto for maintaining compatibility with older browsers.

The following values may be operational on historical browser versions using -moz-appearance or -webkit-appearance prefix, but not on the standard appearance property.

• Firefox entries indicate support using -moz-appearance.
• Chrome, Edge and Safari entries below indicate release version support for values used with the -webkit-appearance vendor-prefix property.
• Values with an asterisk (*) have clear intents for removal.
• For each cell of browser version and value:
  • Y{version}: indicates a value is supported up to and including {version}
  • N{version}: support was removed in a release earlier than {version}
  • a blank cell indicates that support was never added

appearance = 
  none              |
  auto              |
  base              |
  base-select       |
  <compat-auto>     |
  <compat-special>  |
  base              
<compat-auto> = 

  searchfield   |
  textarea      |
  checkbox      |
  radio         |
  menulist      |
  listbox       |
  meter         |
  progress-bar  |
  button        
<compat-special> = 

  textfield        |
  menulist-button  

The following example shows how to remove the default styling from a checkbox and select element, and apply custom styling. The appearance of the checkbox is changed to a circle, and the select element shows how to remove the arrow indicating that the list can be expanded.

<input type="checkbox" />
<input type="checkbox" checked />

<select>
  <option>default</option>
  <option>option 2</option>
</select>
<select class="none">
  <option>appearance: none</option>
  <option>option 2</option>
</select>

input {
  appearance: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input:checked {
  border-radius: 50%;
  background: green;
}

select {
  border: 1px solid black;
  font-size: 1em;
}

select.none {
  appearance: none;
}

To opt-in to custom select functionality, the <select> element and its picker both need to have an appearance value of base-select set on them:

select,
::picker(select) {
  appearance: base-select;
}

You could then, for example, remove the picker's default black border:

::picker(select) {
  border: none;
}

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