Allows authors to change or suppress the native appearance of user interface controls — such as buttons, checkboxes, text inputs, and select menus — as rendered by the browser by default according to the operating system.appearance: none;/* Custom styled checkbox using appearance: none */
input[type='checkbox'] {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid #555;
border-radius: 3px;
background-color: white;
cursor: pointer;
}
input[type='checkbox']:checked {
background-color: #0070f3;
border-color: #0070f3;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}noneCompletely suppresses the native appearance of the control. The element is rendered without any browser default styling, giving the author full visual control via CSS. This is the most commonly used value in practice — used to reset the styling of buttons, checkboxes, inputs, and select menus before applying custom design.autoThe default value — the browser renders the element with its native, platform-appropriate appearance based on its type. For example, a button looks like a system button, and a checkbox looks like the operating system's native checkbox. On elements with no native appearance, it behaves like none.baseGives the widget a primitive appearance — minimally styled and fully stylable via CSS, while maintaining its native functionality. Unlike none, it preserves built-in interactive capabilities. This value is defined in the spec but not yet supported by any browser.base-selectRelevant only to the textfieldA compatibility special value (): changes the native appearance of input elements with type="search" to match that of a plain text field. On other elements, it behaves like auto.menulist-buttonA compatibility special value (): changes the appearance of dropdown buttonA compatibility value (): equivalent to auto. Exists for compatibility with older prefixed versions of this property. Use auto instead.checkboxA compatibility value (): equivalent to auto. Use auto instead.radioA compatibility value (): equivalent to auto. Use auto instead.textareaA compatibility value (): equivalent to auto. Use auto instead.searchfieldA compatibility value (): equivalent to auto. Use auto instead.menulistA compatibility value (): equivalent to auto. Use auto instead.listboxA compatibility value (): equivalent to auto. Use auto instead.meterA compatibility value (): equivalent to auto. Use auto instead.progress-barA compatibility value (): equivalent to auto. Use auto instead.CSS Basic User Interface Module Level 4W3C Working Draft (20 January 2026)none auto base base-select W3CMDNShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
