Wie style Autocomplete Dropdown-Liste

Ich bin auf der Suche nach einer reinen HTML/CSS-Lösung. Alles, was ich bisher gefunden habe, betrifft Plugins (normalerweise jQuery).Wie style Autocomplete Dropdown-Liste

Ich möchte in der Lage sein, die "Autocomplete-Vorschläge Dropdown-Box" (ich weiß nicht, wie es wirklich heißt, so dass ich versuchte, es zu beschreiben) zu stylen.

Zum Beispiel habe ich

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; 
}

Das "Autocomplete Dropdown-Box" ist die traditionelle einfache weiße Box mit einer eigenen Standardschriftart. Ich weiß nicht, was ich in meinem CSS anvisieren soll, um dies zu aktualisieren.

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>

Quelle

2015-02-03 drewsmug

wenn möglich bitte die HTML-Mark aus Ihrem autocompleteDropdownbox bieten. – Jatin

Danke. Ich habe das abgespeckte HTML hinzugefügt. Wenn ich Städte betrete (z. B. Sacramento, San Diego, Salem), wächst meine Dropdown-Box, aber ich weiß nicht, wie ich sie stylen soll. – drewsmug

Ich glaube, ich verstehe die Verwirrung der Menschen jetzt mehr. Ich habe keinen Code, der die AutocompleteDropdownbox erstellt. Ich denke, es ist eine Standard-Browser-Sache. Wenn Sie zum Beispiel ein einfaches HTML-Formular für die Anmeldung (nur ein Feld für Benutzername und Passwort) erstellen und sich mit zufälligen Konten anmelden, schlägt Ihr Browser vor, dass Sie sich mit diesen zufälligen Kontonamen anmelden. Diese Dropdown-Box, die diese vorherigen Login-Namen vorschlägt, ist nichts, was ich codiert habe. – drewsmug

Anscheinend ist der Autocomplete-Drop-Down-Box nicht mit CSS bearbeitet werden kann und ist nicht Teil des DOM. Ich habe diese Information aus den folgenden (doppelten) Fragen gefunden.

How to style the browser's autocomplete dropdown box?

Styling autocomplete dropdowns in browsers

Quelle

2015-02-03 22:54:51 drewsmug

Problem hier sind Browser, weil sie ihre eigenen Stile anwenden. Um diese Einschränkung zu umgehen, müssen Sie die Browser-Engine-Stile überschreiben/deaktivieren.

Für webkit (in Safari getestet) verwenden:

-webkit-appearance:none;

Um die Wirkung, offene jsfiddle example mit Webkit-basierten Browser, e zu sehen. G. Safari.

Mehr Informationen über webkit Einschränkungen der Suche Eingänge Styling: LINK

bearbeiten: falsch verstanden habe ich die Frage, weil Ihr CSS-Code wurde das Sucheingabefeld Targeting. Basierend auf dem neuen HTML-Code sollten Sie wahrscheinlich den Stil von div mit der ID city_search_matches anvisieren. Wie die Ergebnisse dieses div-Element auffüllen, ist unbekannt, daher kann ich Ihnen bei keinem Code-Beispiel helfen.

Quelle

2015-02-03 21:19:14 atastrumf

Danke für das Betrachten meiner Frage. Ich habe Input [type = search] {- webkit-appearance: none;} hinzugefügt und das schien mein Problem in keiner Weise zu beeinflussen. Es gibt immer noch eine Dropbox, und ich weiß immer noch nicht, wie ich sie stylen soll. – drewsmug

@drewsmug Sicher hat es nicht geholfen, ich habe den Teil vermisst, den Sie versuchen, das Dropdown-Menü nicht die Eingabebox zu stylen. Ich habe meine Antwort bearbeitet, aber mit derzeit begrenzten Informationen, das ist alles, was ich Ihnen geben kann. – atastrumf

Ich bin mir jedoch nicht sicher, welche Auto-Complete-Steuerung Sie verwenden.

Sample Working Demo

Wenn Sie JQuery Autocomplete verwenden, dann können Sie

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

Above mit CSS die folgenden CSS-Ziel wird die Schriftfarbe zu Rot ändern und dann die Ecke machen für dropdownoptions abgerundet werden.

komplette Code:

<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>

Quelle

2015-02-03 22:24:52 Jatin

Ich verstehe nicht die Asp: TextBox Zeug. Es sieht so aus, als wäre das ASP-Code. Ich bin immer noch verwirrt darüber, wie ich die Dropbox zielen würde, um den von mir angegebenen Klassenstil .automocomplete zu verwenden. Es ist kein Element, das ich geschrieben habe, daher kann ich "class = 'autocomplete'" nicht hinzufügen. – drewsmug

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

Stellen Sie sicher, dass das jQuery-ui-Paket und ausgebrachten Links für die css und js in Ihrem HTML heruntergeladen haben.http://jqueryui.com/download/

Die CSS-Datei, die Sie überschreiben ist jquery-ui.css

Quelle

2015-08-10 07:17:45

Wie style Autocomplete Dropdown-Liste

Antwort

Verwandte Themen