カテゴリー: 素材

selectのデザインをCSSとJavascriptでカスタマイズ

jQuery mobile などの大規模なプラグインを導入せずに
オリジナルデザインのセレクトボックスを設置するためのjQuery+CSSのソースをご紹介します。

動作サンプルはこちら。

フォーム要素の初期装飾をリセットできるCSS3のappearanceは、IE8以下でつかうことができませんが
このやり方なら、外形の装飾はIE6から最新のブラウザまで同じようにデザインを変えられます。
ただ、スマートフォン対応をがメインのため、展開したときのoption部分はデフォルトのままです。

“selectのデザインをCSSとJavascriptでカスタマイズ” の続きを読む

千鳥格子のシームレスなパターン素材

千鳥格子のパターンをつくりました。
レティーナディスプレイでもいけるよう、大きめサイズになっています。
好きな色で塗り替えられるよう、psdと透過pngもはいっています。

houndstooth

alpha_houndstooth.pngなど、切り分け済みのものをPhotoshopで開き

　全選択（Ctrl+a） → コピー（Ctrl+c） → メニューバーの「編集」 → パターンを定義

で、パターンにすると使い回しできて便利です。

html5のplaceholderをIEで再現するjQueryプラグイン

練習で、html5のplaceholder（プレースホルダー）をIEでも再現するためのプラグインを作ってみました。

このように、対応ブラウザ向けの記述だけでIEでもプレースホルダーらしい機能がついた状態になります。

<input type="text" name="name" placeholder="名前を入力して下さい">

試作版ということで、主にこんなところが抜けています

  • プレースホルダーの内容がフォームより長い場合は、はみ出す
  • フォームをブロック要素（div）で囲う仕組みなので、どんなレイアウトでも簡単に組み込めるか不明
    とりあえず、よくある<table>タグで組んであるフォームでは差し支えなかった…。
  • スタイルシート部分が決め打ち状態なのでカスタマイズは面倒

jQuery1.7 ＋ IE６，７，８，９で、動いてることを確認しています。
1.7にした深い意味はないし、メジャーバージョンに更新する時は1.6から対応に落とそう。

デモも設置してないし、適当すぎやな。

“html5のplaceholderをIEで再現するjQueryプラグイン” の続きを読む