Chrome では、現時点ではデータリストは、input
要素を入力またはダブルクリックした場合にのみ表示されます (例: http://jsfiddle.net/r7Y4v/ )。
データリストをより早く表示させようとしています。理想的には、入力の横に小さな「ドロップダウン矢印」を配置し、クリックするとデータリストが表示されるようにします。
Webkit ソリューションを探しています。
Chrome では、現時点ではデータリストは、input
要素を入力またはダブルクリックした場合にのみ表示されます (例: http://jsfiddle.net/r7Y4v/ )。
データリストをより早く表示させようとしています。理想的には、入力の横に小さな「ドロップダウン矢印」を配置し、クリックするとデータリストが表示されるようにします。
Webkit ソリューションを探しています。
これを行う方法の仕様には何も見つかりません。
また、現在のブラウザーでの実装はかなり異なるように見えることに気付きました (クリックと dbl クリック、矢印キー、完全なリストとフィルターされたリスト、およびフィルターが部分入力に一致する方法など)。
私には、今のところ適切に機能するコンボボックスはまだなく、データリストはまだ初期段階にあるようです。
したがって、現在は自分で作成するか、準備ができているライブラリを使用する方がよいようです。
「最小データリスト」ライブラリはかなり人気があるようです(読むのに良いリンクです)。
そのページには、GitHub コードとデモ ページへのリンクがあります。
補足: 誰かがより良い答えを出してくれると嬉しいです! また、最初は、データリスト/オートコンプリート/コンボボックスに接続できるドロップダウン ボタンが必要な場合に、ドロップダウン ボタンのスタイル オプションを改善できるように、矢印ボタンを除外することをお勧めします。これらすべてがまだ特定されておらず、ネイティブにサポートされていないように見えることに驚いています。仕様書作成者の皆さん、単純なネイティブ コンボ ボックス (これは長い間遅れていました) を提供してください。それから、スパイスのようなフィルターを追加してください!
編集: 2012 年 8 月以降、ドロップダウン機能を要求する Chromium プロジェクトに関する未解決の機能要求があります。
このようなものはどうですか?Chromeはホバー時にアイコンを配置するので、この画像を同じ場所に配置しました.
input[list]{
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAJCAYAAADtj3ZXAAAAB3RJTUUH3wMHFxkH6cbPfQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAABaSURBVHjaY2RgYDAA4jkMxIEsID6FLrgOiP8TwNNwmSgNxJ/xaDwPxGz4nJSDQ+MHIFYn5B9mqA3omsOJDA9w4P1B0jiTWI0wMIFYf2IDPEB8gxh/4jOAIAAAbfwl/FxzevIAAAAASUVORK5CYII=');
background-repeat:no-repeat;
background-position:right;
background-origin: content-box;
}