サイト内検索
...スタイルシート(css)...
スタイルシート・フォーム
境界線
- 境界線は、フォーム（form要素）のinput要素・textarea要素・select要素に
- boederプロパティを指定します。
- [使い方]
- select{
border: 2px #999999 dotted;
}
- [メモ]
- borderプロパティについては、こちらをご覧ください。
- borderの種類については、こちらをご覧ください。
- textarea要素については、こちらをご覧ください。
- input要素については、こちらをご覧ください。
- select要素については、こちらをご覧ください。
- ＊ＩＥでは、borderプロパティは、select要素に反映されないようです。
-
他のブラウザ
などで、ご覧ください。
| プロパティ名 | 値 | 説明 |
|---|---|---|
| border: | ; | 「thin solid #ccff99」
のように太さ・色・種類を指定します。 (半角スペースで区切って、順番は自由です) 必要でないものは省略できます。 |
| プロパティ名 | 値
（サンプル） |
説明 |
|---|---|---|
| border-top: | 2px solid #ccff99; | 上の境界線の太さ・色・種類を指定します。 |
| border-right: | 2px solid #ccff99; | 右の境界線の太さ・色・種類を指定します。 |
| border-bottom: | 2px solid #ccff99; | 下の境界線の太さ・色・種類を指定します。 |
| border-left: | 2px solid #ccff99; | 左の境界線の太さ・色・種類を指定します。 |
サンプル
[ｈｅａｄの中]
<style type="text/css"><!--
select{
width: 300px;
border: 5px #9999dd double;
}
textarea{
width: 300px;
height: 40px;
border: 3px #9999dd dotted;
}
input{
border: 7px #ccff99 groove;
}
-->
</style>
[ｂｏｄｙの中]
<form method="get" action="sample.html">select
<select name="wakusen" size="1">
<option value="サンプル-1">サンプル-1</option>
<option value="サンプル-2">サンプル-2</option>
<option value="サンプル-3">サンプル-3</option>
</select>
<input type="submit" value="送信する" />
textarea
<textarea cols="20" rows="2"></textarea>
<input type="submit" value="送信する" />
[ブラウザ上]
