ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >フォーム

枠線の太さ、色、種類を指定する

{border:太さ 色 種類;}でフォームのボタンや入力欄の枠線の太さ、色、種類を指定する ことができます。

枠線の細かな指定方法はボックスの
枠線の太さを指定する 枠線の種類を指定する 枠線の色を指定するの項目を参照してください。

枠線の種類

枠線の種類は以下の通りです。

線の種類 説明
solid 通常の線
double 二重線
ridge 山形の線
groove 谷型の線
dotted 点線
dashed 大きな点線
inset 内側にくぼんだ線
outset 外側に突出した線

【ブラウザ表示】


ソース

<form method="POST" action="xxx.cgi">
<div>
<input type="text" name="text1" class="sample5" value="テキストフィールド">
</div>
<p>
<textarea name="area1" class="sample6" cols="20" rows="8">テキストエリア</textarea>
</p>
<p>
<input type="submit" value="送信" class="sample7">
</p>
</form>

外部ファイル

input.sample5{border:2px yellow solid;}
textarea.sample6{border:2px green dotted;}
input.sample7{border:4px gray double;}


<body>〜</body>に直接記入する場合

<form method="POST" action="xxx.cgi">
<div>
<input type="text" name="text1" style="border:2px yellow solid;" value="テキストフィールド">
</div>
<p>
<textarea name="area1" style="border:2px green dotted;" cols="20" rows="8">テキストエリア</textarea>
</p>
<p>
<input type="submit" value="送信" style="border:4px gray double;">
</p>
</form>

■ その他の項目

ボタンや入力欄のサイズを変える
文字のサイズや色を変える
背景色や画像を指定する
外側、部品の余白を指定する
フォームを並べる
入力欄の入力モードを変更する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.