selectタグの上にコンテンツを乗せる
wrote2009.07.13
selectタグの上にコンテンツを乗せる手法。いろいろネット検索したものを総まとめした「覚書」。
これを参考に応用すると、うまくいく。ただW3Cに準拠していない。いけず・・・。
ポイントは、iframeを挟み込むこと。
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<title>サジェスト時のサンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
.suggest,
iframe,
.suggest ul{
position:absolute;
top:12px;
left:0;
z-index:1;
}
.suggest ul{
margin:0;
padding:0;
list-style:none;
background:#eee;
z-index:100;
}
.suggest li{
margin:0;
padding:0;
}
</style>
</head>
<body>
<form action="/" method="get">
<div style="position:relative; top:0; left:0; z-index:1;">
<input type="text" name="sample" value="" />
<div class="suggest">
<iframe frameborder="0"></iframe>
<ul>
<li>ttttt1</li>
<li>ttttt2</li>
<li>ttttt3</li>
<li>ttttt4</li>
<li>ttttt5</li>
<li>ttttt6</li>
</ul>
</div>
</div>
<div>
<select name="test">
<option value="1">test1</option>
<option value="2">test2</option>
<option value="3">test3</option>
<option value="4">test4</option>
<option value="5">test5</option>
<option value="6">test6</option>
<option value="7">test7</option>
<option value="8">test8</option>
<option value="9">test9</option>
</select>
</div>
</form>
</body>
</html>