1. 現在位置:
  2. トップページ
  3. HP作成tips
  4. stylesheet
  5. フォーム
背景(色を指定) |  枠線の太さ、色、種類 |  文字色を指定 |  横幅・高さを指定 |  日本語入力初期指定 |  行の高さを指定 |  最大最小の高さ幅を指定 |  スクロールバーの色 | 
フォーム(input、textarea、select要素)
background-color 背景(色を指定)
input, select, textarea {
background-color: #85b9e9;
}
お名前:
E-mail:
性別:
住んでる地域:
好きな食べ物: りんご ぶどう みかん なし メロン スイカ イチゴ
ご意見:
   
枠線の太さ、色、種類をひとまとめに指定(input、textarea、(select)要素)
input, select, textarea {
border: medium red double;
}
文字色を指定(input、textarea、select要素)
input, select, textarea {
color: red;
}
width 横幅、height 高さを指定
textarea {
width: 200px;
height: 10em;
}
日本語入力システムの初期状態を指定
.example {
ime-mode: inactive;
}
active (IMEオン・日本語入力モード)
inactive (IMEオフ・英数字入力モード)
disabled (IME使用不可・英数字入力モード)
auto (自動)デフォルト
line-height 行の高さを指定(textarea要素)
textarea {
width: 300px;
height: 7em;
line-height: 1.5em;
}
・行間(行の高さから文字サイズを引いた残りが、行間の大きさになる)
・数値+単位で指定(line-height: 1.5em; … 文字サイズ×1.5倍の高さを指定(1em = 文字の高さ))
・数値で指定(line-height: 1.5; … 文字サイズ×1.5倍の高さを指定(1 = 文字の高さ))
・パーセントで指定(line-height: 150%; … 文字サイズ×1.5倍の高さを指定(100% = 文字の高さ))
max-height 最大の高さ、min-height 最小の高さを指定
iframe {
max-height: 350px;
min-height: 250px;
}
max-width 最大幅、min-width 最小幅を指定(input、textarea、select要素)
#example {
max-width: 500px;
min-width: 400px;
}
スクロールバーの色を変える
textarea {
width: 300px;
height: 7em;
scrollbar-base-color: #ff0000;
}
textarea {
width: 300px;
height: 7em;
scrollbar-face-color: #ff8c00;
scrollbar-track-color: #fff8dc;
scrollbar-arrow-color: #ffffff;
scrollbar-highlight-color: #fff8dc;
scrollbar-shadow-color: #d2691e;
scrollbar-3dlight-color: #ffebcd;
scrollbar-darkshadow-color: #8b0000;
}