CSS3

プロパティ

appearance

→● mdn

¶要素の外観の切り替え法¶実験的。

文書内のほとんどの要素に対しては、その見かけは CSS により全部的に制御できる。一方で、ウィジェットは、概して、ホスト OS のネイティブ ユーザー インタフェース コントロールを利用してユーザー エージェントにより具現化される ― それは、CSS を利用して再現できないし、スタイルできない。

この仕様における用語 ウィジェット は、ネイティブな外観 を備え得る要素を表す ― すなわち、ユーザー エージェントのものに相似的な［ホスト［OS／プラットフォーム］のネイティブな［ウィジェット／コントロール］（順不同）］の様に、［さもなくば【このプロパティ以外では】CSS では表出不能な、見かけと感触］を伴って具現化されることを意味する。どの要素がネイティブな外観を備え得ると定義されるかは、ホスト言語（例： HTML [HTML]）に委ねられる。

この仕様は、appearance プロパティを導入して，このふるまいにいくらかの制御を供する。特に、このプロパティに値 none を利用すれば、作者は、ウィジェット用のネイティブな外観を抑止した上で、CSS を利用してそれをスタイルし直せるようになる。

none

要素は、CSS の通例の規則に従って具現化される。ウィジェット以外の置換要素は、これにより影響されず、置換要素であり続ける。ウィジェットは、ネイティブな外観にならないものとする。詳細は、［§ 要素の装飾的な側面に対する appearance の効果、§ 要素の意味論上の側面に対する appearance の効果］を見よ。

<BUTTON>BUTTON要素</BUTTON><BR>
<BUTTON style="appearance:none">BUTTON要素</BUTTON><BR>

¶noneだと昔のタイプになる？

<INPUT type=radio><BR>
<INPUT style="appearance:none" type=radio><BR>

¶

<INPUT type=checkbox><BR>
<INPUT style="appearance:none" type=checkbox><BR>

¶

auto

ウィジェットはネイティブな外観になってもよい。

ウィジェット以外の要素は、none が指定されていたかのように具現化するものとする。

<BUTTON style="appearance:auto">BUTTON要素</BUTTON><BR>

<compat-auto>

これらの値は、［このプロパティの、以前までの標準でないバージョン］用に開発された内容との互換性を得るために存在する。それらの効果は、どれも auto と同じになる：

＝searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button

<compat-special>

これらの値は、［このプロパティの、以前までの標準でないバージョン］用に開発された内容との互換性を得るために存在する。それらの効果は、この仕様の目的においては、どれも auto と同じになる。しかしながら、ホスト言語は、当の要素のネイティブな外観を定義するときに、これらの値を織り込んでもよい。

＝textfield | menulist-button

searchfield

<BUTTON style="appearance:searchfield">BUTTON要素</BUTTON><BR>
<INPUT type="search"><BR>
<INPUT style="appearance:searchfield"><BR>

¶autoと同じようだ

textarea

push-button

slider-horizontal

checkbox

radio

square-button

menulist

listbox

meter

progress-bar

button

textfield

［input 要素のうち、その type 属性は Search 状態にあるもの］に対しては ― Text 状態にあるものと同様に ― “通常の”テキスト手入力ウィジェットとして描画される。

他のすべての要素に対する効果は、auto と同じになる。

<INPUT type="text"><BR>
<INPUT type="search"><BR>
<INPUT type="search" style="appearance:textfield"><BR>

menulist-button

ドロップダウン ボックスになる select 要素は、“ドロップダウン ボタン”も含め、ドロップダウン ボックスとして描画されるが、ホスト OS のネイティブ コントロールは必ずしも利用されない。そのような要素に対しては、（auto に対しては無視することにされ得る）［color、background-color、border］などの CSS プロパティは無視することにされるべきでない。

他のすべての要素に対しては、この値の効果は auto と同じになる。

<SELECT><OPTION>１<OPTION>２</SELECT><BR>
<SELECT style="appearance:menulist-button"><OPTION>１<OPTION>２</SELECT><BR>

¶

テスト