HTML5+CSS3でサイトを作ってみる。

■ Formのスタイリング

セレクトボックスにスタイルをかける(Chrome, Safariのみ)

サンプルhtml

--[ html ]-----------------------

<select id="selectbox">
  <option>サンプル　01</option>
  <option>サンプル　02</option>
  <option>サンプル 03</option>
</select>

--[ CSS ]------------------------

#selectbox{
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    border-radius:3px;
    padding:10px 30px;
    border:none;
    box-shadow:1px 1px 4px rgba(0,0,0,.4) inset;
}

#inputbox {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
  }

#inputbox::-webkit-search-decoration {
    display: none;
}

要素をボタンやチェックボックス、その他の外観に変えられる

アピアランスをボタンやその他のように変える。バリューはいっぱいあるみたい。
CSS property: -webkit-appearance
apprearance

サンプルhtml

--[ html ]-----------------------

<div id="button">button</div>
<div id="button-bevel">button-bevel</div>
<div id="listbox">listbox</div>
<div id="searchfield">searchfield</div>

--[ CSS ]------------------------

#button {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
}
#button-bevel {
	-webkit-appearance: button-bevel;
	-moz-appearance: button-bevel;
	appearance: button-bevel;
}
#listbox {
	-webkit-appearance: listbox;
	-moz-appearance: listbox;
	appearance: listbox;
}
#searchfield {
	-webkit-appearance: searchfield;
	-moz-appearance: searchfield;
	appearance: searchfield;
}