企業情報 │ お問い合わせ │サポート
[ 日付入力の最小限の設定 ] [ メニュー ] [ 日付入力動作のカスタマイズ]


日付入力の大きなスキン

Because the calendar is an overlayed element it is possible to use a large layout and the user experience won't suffer - quite the contrary.

スタンドアロン・デモ

CSS コード

The initialization of the dateinput is identical to the minimal setup, only a different CSS file has been used for the look and feel of the calendar control. It uses only two very (0.28 Kb) small (1.30 Kb) background gradient images and some of the latest CSS techniques. For example:

#calbody {
	/* background gradient with image. background color can be changed */
	background:#F5F9FF url(gradient/h300.png) repeat-x;
 
	/* CSS shadow for the calendar body */
	-moz-box-shadow:0 0 10px 0px #ccc;
	-webkit-box-shadow:0 0 10px 0px #ccc;
}
 
/* styling of the current date */
#caltoday {
	/* some shadow for the text */
	text-shadow:0 1px 0 #000;
 
	/* inner shadow */
	-moz-box-shadow:inset 0 0 10px 0px #000;
}

Obviously all these nice CSS tricks won't work in every browser. It is up to you to decide what kind of compromises you want to make. Take a look at the skinning documentation for the details of CSS id and class names.


[ 日付入力の最小限の設定 ] [ メニュー ] [ 日付入力動作のカスタマイズ]
Copyright(c)2005 Your site name All rights reserved. テンプレートby LinkFly