eyemovic inc.

Culture blog会社の活動・働き方

2014.09.24

フォームの装飾

フォームの装飾についてご紹介致します。

PC版だとブラウザによって再現出来ないものがありますので、
そういった場合にはjQueryとかと組み合わせることで、
対応出来たりします。

今回は、スマートフォンをメインにCSSのみで装飾する方法をご紹介したいと思います。

下記にサンプルを入れてはいますが、chromeやスマートフォンでしか思ったデザインにはなりません。
通常の見た目の方は、下記キャプチャをご参考ください。

css_form

selectの装飾は、ただ単に色などを指定してもうまくいきません。
そこで、appearance というプロパティを設定します。

 

radioボタンの装飾。

 

チェックボックスは、ちょっとCSSが長くなってしまいますが、
下記のような形で、チェックボックスの大きさや色を変更出来ます。

 

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。