Jak stylować listę rozwijaną autouzupełniania

Szukam czystego rozwiązania HTML/CSS. Wszystko, co do tej pory znalazłem, zawiera wtyczki (zazwyczaj jquery).Jak stylować listę rozwijaną autouzupełniania

Chcę móc nadać stylowi "pole wyboru podpowiedzi autouzupełniania" (nie wiem, jak to się nazywa, więc starałem się je opisać).

Na przykład mam

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

The "rozwijanej listy autouzupełniania" jest tradycyjnym proste białe pudełko z własnym domyślnej czcionki. Nie wiem, co wybrać w moim CSS, aby to zaktualizować.

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>

Źródło

2015-02-03 drewsmug

jeśli to możliwe proszę podać Mark HTML aż Twojego autocompleteDropdownbox. – Jatin

Dzięki. Dodałem pusty HTML. Gdy wchodzę do miast (np. Sacramento, San Diego, Salem) Moje okno rozwijane rośnie, ale nie wiem, jak go stylizować. – drewsmug

Myślę, że teraz bardziej rozumiem zamieszanie ludzi. Nie mam żadnego kodu, który tworzy autocompleteDropdownbox. Myślę, że to jest jakaś domyślna rzecz przeglądarki. Na przykład, jeśli utworzysz prosty formularz html do logowania (tylko nazwa użytkownika i hasło) i zaczniesz logować się z losowymi kontami, przeglądarka zacznie sugerować, że logujesz się przy użyciu tych losowych nazw kont. To pole rozwijane sugerujące te poprzednie nazwy logowania nie jest czymś, co zakodowałem. – drewsmug

Podobno pole autouzupełnianie rozwijana nie mogą być edytowane za pomocą CSS i nie jest częścią DOM. Znalazłem te informacje z następujących (duplikatów) pytań.

How to style the browser's autocomplete dropdown box?

Styling autocomplete dropdowns in browsers

Źródło

2015-02-03 22:54:51 drewsmug

problemem są przeglądarek, ponieważ stosują własne style. Aby ominąć to ograniczenie, należy przesłonić/wyłączyć style mechanizmu przeglądarki.

Dla WebKit (przetestowane w Safari) używać:

-webkit-appearance:none;

Aby zobaczyć efekt, otwartą jsfiddle example z przeglądarki WebKit oparte, e. sol. Safari.

Więcej informacji na temat ograniczeń WebKit Search Wejścia stylizacji: LINK

Edit: źle zrozumiałem pytanie, ponieważ Twój kod css zostało skierowane pole wejściowe wyszukiwania. W oparciu o nowy kod HTML powinieneś prawdopodobnie wybrać styl div z identyfikatorem city_search_matches. W jaki sposób wyniki zapełniają ten element div jest nieznany, więc nie mogę Ci pomóc z przykładami kodu.

Źródło

2015-02-03 21:19:14 atastrumf

Dzięki za spojrzenie na moje pytanie. Dodałem input [type = search] {- webkit-appearance: none;} i to nie wpłynęło na mój problem w żaden sposób. Wciąż pojawia się dropbox i wciąż nie mam pojęcia, jak go stylizować. – drewsmug

@drewsmug Pewnie to nie pomogło, brakowało mi części, którą próbujesz ustawić w liście rozwijanej, a nie w polu wprowadzania danych. Zmieniłem moją odpowiedź, ale z aktualnie ograniczonymi informacjami, to wszystko, co mogę ci dać. – atastrumf

Jednak nie jestem pewien, której kontroli automatycznej używasz.

Sample Working Demo

Jeśli używasz jQuery autouzupełniania następnie można kierować za pomocą poniżej css

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

Przede css będzie zmienić kolor czcionki na czerwony, a następnie dokonać narożnik być zaokrąglona do dropdownoptions.

Kompletna Kod:

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

Źródło

2015-02-03 22:24:52 Jatin

Nie rozumiem strony asp: TextBox. Wygląda na to, że jest to kod ASP. Nadal nie rozumiem, w jaki sposób mogę kierować reklamy na skrzynkę referencyjną, aby użyć określonego stylu lekcji .autocomplete. Nie jest to element, który napisałem, więc nie mogę dodać do niego "class =" autouzupełniania "". – drewsmug

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

Upewnij się, że pobrałeś paczkę jQuery-UI oraz pod warunkiem, linków do CSS i JS w kodzie HTML.http://jqueryui.com/download/

Plik css jesteś przesłanianie jest jquery-ui.css

Źródło

2015-08-10 07:17:45

Jak stylować listę rozwijaną autouzupełniania

Odpowiedz

Powiązane problemy