サイト内検索
...スタイルシート(css)...
スタイルシート・フォーム
境界線
- 境界線は、フォーム(form要素)のinput要素・textarea要素・select要素に
- boederプロパティを指定します。
- [使い方]
- select{
border: 2px #999999 dotted;
}
プロパティ名 | 値 | 説明 |
---|---|---|
border: | ; | 「thin solid #ccff99」
のように太さ・色・種類を指定します。 (半角スペースで区切って、順番は自由です) 必要でないものは省略できます。 |
プロパティ名 | 値
(サンプル) |
説明 |
---|---|---|
border-top: | 2px solid #ccff99; | 上の境界線の太さ・色・種類を指定します。 |
border-right: | 2px solid #ccff99; | 右の境界線の太さ・色・種類を指定します。 |
border-bottom: | 2px solid #ccff99; | 下の境界線の太さ・色・種類を指定します。 |
border-left: | 2px solid #ccff99; | 左の境界線の太さ・色・種類を指定します。 |
サンプル
[headの中]
<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>
[bodyの中]
<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="送信する" />
[ブラウザ上]