検索フォームの入力エリアとボタンを繋げるcssの例です。
地味になります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<meta content="text/css" http-equiv="Content-Style-Type" />
<meta content="text/javascript" http-equiv="Content-Script-Type" />
<style type="text/css">
<!--
body {
background :none repeat scroll 0 0 #F6F6F6;
color :#000000;
font :medium/1em monospace;
margin :1em 0 0 1em;
padding :0;
word-wrap :break-word;
}
#sidebar #CustomSearch1 {
width : 255px;
}
/* ================================================================ */
#sidebar table.gsc-search-box, #sidebar table.gsc-search-box * {
font-family :monospace;
font-size :medium;
font-style :normal;
font-variant :normal;
font-weight :normal;
letter-spacing :0;
line-height :1em;
margin :0;
padding :0;
text-transform :none;
word-spacing :0;
word-wrap :normal;
}
#sidebar table.gsc-search-box {
border-collapse :collapse;
border-spacing :0;
border-style :none;
border-width :0;
margin-bottom :2px;
width :100%;
}
#sidebar table.gsc-search-box td.gsc-input {
background-color :#FFFFFF;
border :1px solid gray;
margin :0;
padding :0;
width :99%;
}
#sidebar input.gsc-input {
background-color :#FFFFFF;
border-width :0;
height :1.5em;
line-height :1.5em;
margin :0;
overflow :hidden;
padding :0;
vertical-align :middle;
width :100%;
}
#sidebar table.gsc-search-box td.gsc-search-button {
background-color :buttonface;
border :1px solid gray;
margin :0;
padding :0;
vertical-align :middle;
width :1%;
}
#sidebar input.gsc-search-button {
background-color :buttonface;
border-width :0;
cursor :pointer;
height :1.5em;
line-height :1.5em;
margin :0;
padding :0;
width :3em;
}
/* ================================================================ */
-->
</style>
</head>
<body>
<div id="sidebar">
<div class="widget CustomSearch" id="CustomSearch1">
<h2 class="title">このブログを検索</h2>
<div class="widget-content">
<div id="CustomSearch1_form">
<form accept-charset="utf-8" class="gsc-search-box">
<table cellspacing="0" cellpadding="0" class="gsc-search-box">
<tbody>
<tr>
<td class="gsc-input"><input type="text" value="あいうえお" title="検索" name="search" class=" gsc-input" size="10" autocomplete="off" /></td>
<td class="gsc-search-button"><input type="submit" title="検索" class="gsc-search-button" value="検索" /></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿