web-dev-qa-db-fra.com

Est-il possible de styliser les suggestions déroulantes lors de l'utilisation de HTML5 <datalist>?

Voir ici: http://jsfiddle.net/zemar (Doit utiliser Firefox ou Opera pour voir)

Lorsque vous cliquez sur la variable select, la liste déroulante est stylée de manière à correspondre, mais si vous commencez à saisir un terme dans la liste de données de la zone de texte, les suggestions qui s'affichent ne sont pas stylées et ne correspondent donc pas au reste de la liste. le style.

Est-il possible de styliser la liste déroulante?

* {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>
htmlcsshtml5html-datalist
23
dudledok

À ma connaissance, vous ne pouvez pas nommer la balise <datalist>. Je recommande d'utiliser l'extension de saisie semi-automatique JQuery. Vous devez donc inclure JQuery dans votre document HTML. voici un lien hébergé par Google: Voir ici

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

Remarque: vous pouvez obtenir de meilleures performances en l'incluant à la fin du document et en utilisant $(document).ready();.

Par exemple:

HTML:

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

Javascript:

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

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

note: code non testé!

Source: http://jqueryui.com/autocomplete/

Vous pouvez appeler cela de la même manière que vous appelez un nav. Voici quelques cours que vous pouvez styler:

.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;
}
3
Android334

Styliser datalist avec CSS uniquement n'est pas possible sur plusieurs navigateurs. Internet Explorer, Firefox, Chrome et Edge appliquent un style de base à l’élément input[list], mais non à datalist, ni à ses éléments enfants option.

Voir Exemple avec CodePen .

Citation de MDN "Styling HTML forms - the laid" :

Certains éléments ne peuvent tout simplement pas être stylés à l'aide de CSS. Ceux-ci incluent: tous les widgets d'interface utilisateur avancés, tels que les contrôles de plage, de couleur ou de date; et tous les widgets déroulants, y compris les éléments <select>, <option>, <optgroup> et <datalist>. 

Un moyen très courant de contourner cette limitation d'interface utilisateur consiste à fournir un widget basé sur JavaScript, qui revient à la combinaison d'entrée HTML5 + datalist pour les utilisateurs pour lesquels JS est désactivé.

1
Volker E.