vue.jsを使いながら、HTMLについて色々調べていたら、datalistっていうのを初めて知った。
かなり便利なHTMLタグです。簡単にコンボボックスを実装できる。
以下のようなソースだと、inputタグのlist属性にvalue値を設定するだけで、クリック時にリストを表示できる。
しかしながら、難点があって、CSSが適用できないという制約があるため、リスト自体を装飾したり、リストの幅を大きくしたり、カスタマイズしたいなら、JavaScriptなどでDOM要素を変更する必要がある。
sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="search" name="q" autocomplete="on" list="keywords">
<datalist id="keywords">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</datalist>
</body>
</html>
そして表示は以下の通りになる。
ちなみに以下のCSS要素はinput要素に対して適用されているため、黒くなる。
input[list] {
background-color: #0f0f0f;
}
結果
