※こちらは旧サイトです(新サイトはこちら)
thgreasi/datalist-polyfillで公開されているライブラリを使用しました
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" name="color" id="color" value="" list="colorlist" />
<datalist id="colorlist">
<option value="Black" />
<option value="Blue" />
<option value="Dark Green" />
<option value="Grey" />
<option value="Green" />
<option value="Red" />
<option value="White" />
<option value="Yellow" />
<option value="梅田" />
<option value="ヨドバシ梅田" />
<option value="梅干し" />
</datalist>
</body>
</html>
datalist
タグの中のoption
をselect
で囲むという2つの変更を加えます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" /> <!-- ←追記 -->
</head>
<body>
<input type="text" name="color" id="color" value="" list="colorlist" />
<datalist id="colorlist">
<!--[if IE 9]><select style="display:none"><![endif]--> <!-- ←追記 -->
<option value="Black" />
<option value="Blue" />
<option value="Dark Green" />
<option value="Grey" />
<option value="Green" />
<option value="Red" />
<option value="White" />
<option value="Yellow" />
<option value="梅田" />
<option value="ヨドバシ梅田" />
<option value="梅干し" />
<!--[if IE 9]></select><![endif]--> <!-- ←追記 -->
</datalist>
<!-- 追記:ここから -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="DatalistPolyfill.standalone.js"></script>
<!-- 追記:ここまで -->
</body>
</html>