html - bootstrap - datalist value and text

¿Es posible aplicar un estilo a las sugerencias desplegables al usar HTML5<datalist>?

Question

Consulte aquí: http://jsfiddle.net/zemar (debe usar Firefox u Opera para ver)

Cuando hace clic en la select , el menú desplegable está diseñado para coincidir, pero si comienza a escribir un término de la lista de datos en el cuadro de texto, las sugerencias que aparecen no tienen un estilo y, por lo tanto, no coinciden con el resto de el estilismo

¿Es posible estilizar el menú desplegable?

* {margin:0; padding:0; font-family: arial, sans-serif; font-size: 40px; font-weight: bold; color: #444;}
body {height:100%; background:#F4F3EF;}
.select select, .input input {background: transparent; width: 220px; overflow:hidden; height: 65px; padding-left: 5px;
    padding-bottom: 5px; -webkit-appearance: none; -moz-appearance:none; appearance:none; border:none; cursor:pointer;}
.select select {padding-top: 5px;}
.select, .input {float:left; width: 220px; height: 65px; margin-right: 20px; overflow: hidden; background: #ddd;
    border: 1px solid #ccc;}

    <div class="select">
    <select id="count">
            <option value="1">A</option>
            <option value="2">A pair of</option>
            <option value="3">A few</option>
            <option value="4">Four</option>
    </select>
    </div>
    <div class="input">
        <input type="text" id="query" list="ingredients" placeholder="lamb"></input>
        <datalist id="ingredients">
            <option value="lamb">
            <option value="beef">
            <option value="chicken">
            <option value="fish">
            <option value="vegetarian">
        </datalist>
    </div>

Answer 1

Por lo que yo sé, no se puede <datalist> estilo a la etiqueta <datalist> . Recomiendo usar la extensión JQuery autocompletar. Así que debes incluir JQuery en tu documento html. Aquí hay un enlace alojado por Google: Ver here

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script

Nota: puede obtener un mejor rendimiento al incluir esto al final del documento y al usar $(document).ready();

Por ejemplo:

HTML:

<input type=''text'' id=''input''>

Javascript:

$(document).ready(function() {
    var arrayOfOptions = [
        "Option 1",
        "Option 2",
        "etc"
    ];

    $("#input").autocomplete({source: arrayOfOptions});
});

Nota: código no probado!

Fuente: http://jqueryui.com/autocomplete/

Puede aplicar un estilo similar al estilo de navegación. Aquí hay algunas clases que puedes diseñar:

.ui-autocomplete span.hl_results {background-color: #ffff66;}
.ui-autocomplete-loading {} //the object while it''s loading (in the event of Ajax, in this case would not need this one
.ui-autocomplete {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}

.ui-autocomplete li {font-size: 16px;}
html .ui-autocomplete {
    height: 250px;
}

Answer 2

La creación de datalist con CSS solo no es posible en los navegadores. Internet Explorer, Firefox, Chrome y Edge aplican un estilo básico al elemento de input[list] , pero ni a la lista de datos, ni a sus elementos secundarios de option .

Ver ejemplo de CodePen .

Citando de MDN "Formando formularios HTML - lo feo" :

Algunos elementos simplemente no pueden ser diseñados usando CSS. Estos incluyen: todos los widgets avanzados de la interfaz de usuario, como los controles de rango, color o fecha; y todos los widgets desplegables, incluidos los elementos <select> , <option> , <optgroup> y <datalist> .

Una forma muy común de eludir esta limitación de la interfaz de usuario es proporcionar un widget basado en JavaScript, que recurra a la combinación de entrada y registro de datos HTML5 para los usuarios que tienen JS desactivado.