画像を使わずCSSだけで星形のチェックボックスを作る

tech

CSSだけを使って星形のチェックボックスを作ってみました。ただしWebKitだけ。AndroidのChromeLiteでもOKです。



(GoogleChromeだと星形のチェックボックスに見えます）



<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8 />
<style>
input[type="checkbox"]{
  -webkit-appearance:none;
  line-height:5em;
  width:5em;
  height:5em;
  border:solid 1px #ddd;
  background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
  -webkit-box-shadow:1px 1px 1px #888;
  -webkit-border-radius:0.5em;
  text-align:center;
  color:#888;
  font-weight:bold;
}
input[type="checkbox"]:before {
  content:"★";
  font-size:3em;
} 
input[type="checkbox"]:checked {
  color:#66f;
} 

</style>
</head>

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

</html>


"-webkit-appearance:none"がポイント。これを指定すると、フォーム要素の見た目が無くなり、CSSで好きなようにデザインできるようになります。
参考 Customizing web forms with CSS3 and WebKit by Jason Z. of 37signals