CSS3 Appearance Introduction

Let's take a quick look at the CSS appearance mentioned above. When I studied HTML5 forms, I was curious about what browsers were doing to render different form interfaces, and later found this interesting attribute in chrome when looking at type range input:

And then the style on the right shows this:

It was later found that the CSS3 specification had a definition for appearance, and MDC also had a description of the attribute.

This is a very interesting attribute that can be used to disguise or implement some special interface, such as the Input[type=text appearance set to button, it looks like a button:

The style is as follows:

1 2 3 4

input[type=text]{ -moz-appearance:button; -webkit-appearance:button; Appearance:button;}

But now only WebKit and Firefox are supported by private properties , and there is no full formal support for the major browsers, and the Appearance property values they support are not exactly the same. However, since the wide-web will be included in the specification, I believe that in the near future, the major browsers will implement some basic support for this attribute, so that we can better control the performance of the elements of the page.

David Walsh also briefly described this attribute, but only for WebKit, and he made a demo page.

For more information about CSS3 appearance, please refer to:

• Https://developer.mozilla.org/en/CSS/-moz-appearance
• http://www.w3.org/TR/css3-ui/

We will also keep an eye on the progress of this attribute in each browser.