web-dev-qa-db-fra.com

Comment styliser une liste déroulante

Je recherche une solution HTML/CSS pure. Tout ce que j'ai trouvé jusqu'à présent implique des plugins (jquery généralement).

Je veux pouvoir nommer la "liste déroulante de suggestions de saisie semi-automatique" (je ne sais pas comment elle s'appelle vraiment, alors j'ai essayé de la décrire). 

Par exemple j'ai

CSS

input[type=search] {
        background: none;
        font-weight: bold;
        border-color: #2e2e2e;
        border-style: solid;
        border-width: 2px 2px 2px 2px;
        outline: none;
        padding:10px 20px 10px 20px;
        width: 250px;
}

La "liste déroulante autocomplete" est la boîte blanche simple traditionnelle avec sa propre police par défaut. Je ne sais pas quoi cibler dans mon CSS pour mettre à jour cela.

HTML

<div id="search">
        <form method="GET" action="events">
                <div id="search_field_container">
                        <input name="city" id="search_input" type="search" placeholder="City, ST">
                </div>
                <input type="submit" value="Find">
        </form>
</div>
htmlcsshtml5css3
11
drewsmug

Apparemment, la liste déroulante autocomplete ne peut pas être modifiée avec CSS et ne fait pas partie du DOM. J'ai trouvé cette information à partir des questions suivantes (en double).

Comment nommer la liste déroulante de saisie semi-automatique du navigateur?

Styling des listes déroulantes à remplissage automatique dans les navigateurs

5
drewsmug

Cependant, je ne suis pas sûr du contrôle de complétion automatique que vous utilisez. 

Exemple de démonstration de travail

Si vous utilisez Jquery AutoComplete, vous pouvez cibler en utilisant le fichier css ci-dessous.

/*Css to target the dropdownbox*/
    ul.ui-autocomplete {
        color: red !important;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

Au-dessus de css, la couleur de la police devient rouge et le coin est arrondi pour les options déroulantes.

Code complet:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <style>
        input[type=search] {
            background: none;
            font-weight: bold;
            border-color: #2e2e2e;
            border-style: solid;
            border-width: 2px 2px 2px 2px;
            outline: none;
            padding: 10px 20px 10px 20px;
            width: 250px;
        }
      /*Css to target the dropdownbox*/
        ul.ui-autocomplete {
            color: red !important;
            -moz-border-radius: 15px;
            border-radius: 15px;
        }
    </style>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script>
        $(function () {
            var availableTags = [
              "ActionScript",
              "AppleScript",
              "Asp",
              "BASIC",
              "C",
              "C++",
              "Clojure",
              "COBOL",
              "ColdFusion",
              "Erlang",
              "Fortran",
              "Groovy",
              "Haskell",
              "Java",
              "JavaScript",
              "LISP",
              "Perl",
              "PHP",
              "Python",
              "Ruby",
              "Scala",
              "Scheme"
            ];
            $("#search_input").autocomplete({
                source: availableTags
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div class="ui-widget">
            <input name="city" id="search_input" type="search" placeholder="City, ST">
        </div>
    </form>
</body>
</html>

1
Jatin
.ui-widget-content .ui-state-focus
{
    background: blue;
    border: 1px solid red;
}

Assurez-vous d'avoir téléchargé le package jQuery-ui et les liens fournis pour les fichiers css et js dans votre code HTML. http://jqueryui.com/download/

Le fichier css que vous substituez est jquery-ui.css 

1
Cameron Hunter

Le problème, ce sont les navigateurs, car ils appliquent leurs propres styles. Pour contourner cette restriction, vous devez remplacer/désactiver les styles de moteur de navigateur.

Pour webkit (testé dans Safari), utilisez:

-webkit-appearance:none;

Pour voir l'effet, ouvrez exemple jsfiddle avec le navigateur Webkit, e. g. Safari.

Plus d'informations sur les restrictions du kit de saisie de style dans les entrées de recherche: LINK

Edit: J'ai mal compris la question, car votre code CSS ciblait le champ de saisie de la recherche. Basé sur le nouveau code HTML, vous devriez probablement cibler le style de div avec l'ID city_search_matches. La façon dont les résultats peuplent cette div est inconnue, je ne peux donc pas vous aider avec des exemples de code.

0
atastrumf