このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2012.06.03

CSSでフォームパーツ(input,checkbox,etc…)をカスタマイズ

CSS3ではjQuery等を使用しなくてもフォームパーツ(input,checkbox,etc…)を自由自在にカスタマイズ出来ます。

デフォルトだと、以下の様な好きなデザインに変更が可能です。

↓カスタマイズ

カスタマイズするには魔法の記述、

-webkit-appearance: none;

を加えれば、デフォルトの設定を全てリセットすることが出来、自由自在にカスタマイズすることが出来ます。

そう。CSS3ならね。(iPad風)

-webkit-appearance: none;でリセットすれば、

以下の様なチェックボックスも作成可能です。

CSSでフォームパーツをカスタマイズ – jsdo.it – share JavaScript, HTML5 and CSS

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。