入力フォームや送信ボタンを画像で装飾
入力フォームや送信ボタンを画像で装飾してみましょう(。・ω・。)ﾉ
まずはテキストボックスと検索ボタンの画像を作ります。
自分はFireworksでこんな風に作ってみました。
HTMLファイルのほうは、下記の通りに入力します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>新入力フォームや送信ボタンを画像で装飾</title>
</head>
<body>
<form method="get" action="#" id="search">
<p>
<input type="text" id="text" name="keyword" />
<input type="submit" value="検索" id="submit" />
</p>
</form>
</body>
</html>
@charset "UTF-8";
#search p{
margin:0;
}
#search #text{
width:150px;
padding:4px 10px;
font-size:14px;
line-height:1;
border:none;
outline:none;
background:none;
background-image:url(textbox.png);
background-repeat:no-repeat;
}
#search #submit{
width:40px;
padding:4px 0;
font-size:14px;
line-height:1;
border:none;
outline:none;
background:none;
background-image:url(button.png);
background-repeat:no-repeat;
margin-left:4px;
vertical-align:top;
text-indent:-9999px;
}
#search #submit:hover{
background-position:0 -32px;
}
オリジナルの画像を入力フォームや送信ボタンに装飾してみたいと思ったら、これはオススメです。
検索ボタンにはマウスオーバー処理を使ってます。
「検索」という文字が画像の上に表示されないように、text-indentプロパティを使って表示しないようにしています。
文字を隠し、画像だけを表示するテクニックを画像置換と呼びます。
完成見本はこちら
http://www6.ocn.ne.jp/~yokotchi/blog/sample03/index.html
