Cách tạo kiểu danh sách thả xuống tự động hoàn thành

Tôi đang tìm một giải pháp HTML/CSS thuần túy. Tất cả mọi thứ tôi đã tìm thấy cho đến nay liên quan đến các plugin (jquery thường).Cách tạo kiểu danh sách thả xuống tự động hoàn thành

Tôi muốn có thể tạo kiểu cho "hộp thả xuống đề xuất tự động hoàn thành" (Tôi không biết nó thực sự được gọi là gì nên tôi đã cố gắng mô tả nó).

Ví dụ tôi có

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

Các "hộp thả xuống autocomplete" là truyền thống đơn giản hộp màu trắng với phông chữ mặc định riêng của nó. Tôi không biết những gì để nhắm mục tiêu trong CSS của tôi để cập nhật này.

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>

Nguồn

2015-02-03 drewsmug

nếu có thể vui lòng cung cấp Đánh dấu HTML lên của autocompleteDropdownbox của bạn. – Jatin

Cảm ơn. Tôi đã thêm HTML bị tước. Khi tôi vào các thành phố (ví dụ: Sacramento, San Diego, Salem) Hộp thả xuống của tôi phát triển nhưng tôi không biết cách tạo kiểu cho nó. – drewsmug

Tôi nghĩ rằng tôi hiểu rõ hơn về những người khác. Tôi không có bất kỳ mã nào tạo ra autocompleteDropdownbox. Tôi nghĩ rằng đó là một số điều trình duyệt mặc định. Ví dụ: nếu bạn tạo biểu mẫu html đơn giản để đăng nhập (chỉ cần tên người dùng và mật khẩu) và bắt đầu đăng nhập bằng tài khoản ngẫu nhiên, trình duyệt của bạn sẽ bắt đầu đề xuất bạn đăng nhập bằng các tên tài khoản ngẫu nhiên đó. Hộp thả xuống gợi ý những tên đăng nhập trước đó không phải là thứ tôi đã mã hóa. – drewsmug

Rõ ràng hộp autocomplete thả xuống không thể chỉnh sửa với CSS và không phải là một phần của DOM. Tôi đã tìm thấy thông tin này từ các câu hỏi sau (trùng lặp).

How to style the browser's autocomplete dropdown box?

Styling autocomplete dropdowns in browsers

Nguồn

2015-02-03 22:54:51 drewsmug

Vấn đề ở đây là các trình duyệt, vì họ áp dụng phong cách riêng của họ. Để tránh giới hạn này, bạn cần ghi đè/tắt kiểu trình duyệt của công cụ.

Đối webkit (thử nghiệm trong Safari) sử dụng:

-webkit-appearance:none;

Để xem hiệu ứng, mở jsfiddle example với trình duyệt webkit dựa, e. g. Safari.

Thông tin thêm về các hạn chế webkit của Tìm kiếm đầu vào phong cách: LINK

Sửa: tôi hiểu lầm câu hỏi, bởi vì mã css của bạn đã nhắm mục tiêu vào hộp đầu vào tìm kiếm. Dựa trên mã HTML mới, có lẽ bạn nên nhắm mục tiêu kiểu div với ID city_search_matches. Làm thế nào kết quả cư trú mà div là không rõ, vì vậy tôi không thể giúp bạn với bất kỳ ví dụ mã.

Nguồn

2015-02-03 21:19:14 atastrumf

Cảm ơn bạn đã xem câu hỏi của tôi. Tôi đã thêm đầu vào [type = search] {- webkit-appearance: none;} và điều đó dường như không ảnh hưởng đến vấn đề của tôi theo bất kỳ cách nào. Vẫn còn một dropbox bật lên và tôi vẫn không có ý tưởng làm thế nào để phong cách nó. – drewsmug

@drewsmug Chắc chắn nó không giúp ích gì, tôi đã bỏ lỡ phần mà bạn đang cố gắng tạo kiểu hộp thả xuống không phải hộp đầu vào .. Tôi đã chỉnh sửa phản hồi của mình, nhưng với thông tin giới hạn hiện tại, đó là tất cả những gì tôi có thể cung cấp cho bạn. – atastrumf

Tuy nhiên tôi không chắc bạn đang sử dụng điều khiển tự động hoàn chỉnh nào.

Sample Working Demo

Nếu bạn đang sử dụng Jquery AutoComplete sau đó bạn có thể nhắm mục tiêu bằng cách sử dụng dưới đây css

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

Trên css sẽ thay đổi màu chữ Red và sau đó làm cho góc được làm tròn cho dropdownoptions.

Code Complete:

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

Nguồn

2015-02-03 22:24:52 Jatin

Tôi không hiểu asp: TextBox stuff. Có vẻ như đó là mã ASP. Tôi vẫn còn bối rối về cách tôi sẽ nhắm mục tiêu hộp kéo thả để sử dụng kiểu lớp .autocomplete mà tôi chỉ định. Nó không phải là một phần tử mà tôi đã viết nên tôi không thể thêm "class = 'autocomplete'" vào nó. – drewsmug

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

Hãy chắc chắn rằng bạn đã tải về các gói jQuery-ui và cung cấp liên kết cho css và js trong html của bạn.http://jqueryui.com/download/

Các tập tin css bạn đang trọng là jquery-ui.css

Nguồn

2015-08-10 07:17:45

Cách tạo kiểu danh sách thả xuống tự động hoàn thành

Trả lời

Các vấn đề liên quan