ゼロからはじめるFancyForm - フォームやラジオボタンをグラフィカルに

FnacyFormで使用するスタイルシートの設定

fancy-formフォルダ内にあるreadme_filesフォルダのscreensmall.cssファイルからスタイルシートの一部を抜き出す必要があります。これはscreensmall.cssファイルの末尾の方にある以下の部分をコピーします。

.checked{background-color:#222;background-image:url(chk_on.png)}
.unchecked{background-color:#1c1c1c;background-image:url(chk_off.png)}
.selected{background-color:#222;background-image:url(rdo_on.png)}
.unselected{background-color:#1c1c1c;background-image:url(rdo_off.png)}

以後に説明しているサンプルでは背景色は指定していないので以下のように変更し、使用しています。

.checked{background-image:url(chk_on.png)}
.unchecked{background-image:url(chk_off.png)}
.selected{background-image:url(rdo_on.png)}
.unselected{background-image:url(rdo_off.png)}

次に<label>タグのスタイルシートを設定します。これはFancyFormではグラフィカルなラジオボタン、チェックボックスの表示に<label>タグを利用しているためです。以後に説明しているサンプルでは以下のように定義しています。

label {
    display: block;
    padding-left:32px;
    background-position:8px center;
    background-repeat:no-repeat;
    background-color:#ddd;
    border:1px #ccc solid;
    cursor:pointer;
}

これでスタイルシートの設定が完了です。なお、以後で説明するサンプルでは、これらのスタイル定義はmain.cssファイル内に指定しています。