स्वत: पूर्ण ड्रॉपडाउन सूची कैसे बनाएं

मैं एक शुद्ध HTML/CSS समाधान की तलाश में हूं। अब तक जो कुछ भी मिला है वह प्लगइन्स (आमतौर पर jquery) शामिल है।स्वत: पूर्ण ड्रॉपडाउन सूची कैसे बनाएं

मैं "स्वत: पूर्ण सुझाव ड्रॉपडाउन बॉक्स" शैली बनाने में सक्षम होना चाहता हूं (मुझे नहीं पता कि इसे वास्तव में क्या कहा जाता है इसलिए मैंने इसका वर्णन करने की कोशिश की)।

उदाहरण के लिए मैं

सीएसएस

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

"स्वत: पूर्ण ड्रॉपडाउन बॉक्स" अपने आप डिफ़ॉल्ट फ़ॉन्ट के साथ परंपरागत सरल सफेद बॉक्स है। मुझे नहीं पता कि इसे अपडेट करने के लिए मेरे सीएसएस में क्या लक्ष्य रखना है। क्योंकि वे अपने स्वयं शैलियाँ लागू

एचटीएमएल

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

स्रोत

2015-02-03 drewsmug

यदि संभव हो तो अपने autocompleteDropdownbox से एचटीएमएल मार्क प्रदान करें है। – Jatin

धन्यवाद। मैंने छीन लिया एचटीएमएल जोड़ा। जैसे-जैसे मैं शहरों में प्रवेश करता हूं (जैसे सैक्रामेंटो, सैन डिएगो, सालेम) मेरा ड्रॉपडाउन बॉक्स बढ़ता है लेकिन मुझे नहीं पता कि इसे कैसे शैलीबद्ध किया जाए। – drewsmug

मुझे लगता है कि मैं अब लोगों के भ्रम को समझता हूं। मेरे पास कोई कोड नहीं है जो स्वत: पूर्ण Dropdownbox बनाता है। मुझे लगता है कि यह कुछ डिफ़ॉल्ट ब्राउज़र चीज है। उदाहरण के लिए यदि आप लॉग इन करने के लिए एक साधारण HTML फॉर्म बनाते हैं (केवल उपयोगकर्ता नाम और पासवर्ड फ़ील्ड) और यादृच्छिक खातों के साथ साइन इन करना प्रारंभ करें, तो आपका ब्राउज़र आपको उन यादृच्छिक खाता नामों के साथ साइन इन करने का सुझाव देना शुरू कर देगा। वह ड्रॉप डाउन बॉक्स उन पिछले लॉगिन नामों का सुझाव देता है जो मैंने कोड नहीं किया है। – drewsmug

जाहिर है स्वत: पूर्ण ड्रॉपडाउन बॉक्स सीएसएस के साथ संपादित नहीं किया जा सकता है और डोम का हिस्सा नहीं है। मुझे यह जानकारी निम्न (डुप्लिकेट) प्रश्नों से मिली है।

How to style the browser's autocomplete dropdown box?

Styling autocomplete dropdowns in browsers

स्रोत

2015-02-03 22:54:51 drewsmug

समस्या यहाँ, ब्राउज़र हैं। इस प्रतिबंध को पाने के लिए आपको ब्राउज़र इंजन शैलियों को ओवरराइड/अक्षम करने की आवश्यकता है।

वेबकिट (सफारी में परीक्षण) के लिए उपयोग करें:

-webkit-appearance:none;

प्रभाव, वेबकिट आधारित ब्राउज़र, ई के साथ खुला jsfiddle example देखने के लिए। जी। सफारी।

खोजें इनपुट स्टाइल के वेबकिट प्रतिबंध पर अधिक जानकारी: LINK

संपादित: मैं, सवाल गलत समझा क्योंकि आपके सीएसएस कोड खोज इनपुट बॉक्स को लक्षित किया गया था। नए एचटीएमएल कोड के आधार पर, आपको शायद आईडी city_search_matches के साथ div की शैली को लक्षित करना चाहिए। परिणाम कैसे पॉप्युलेट करते हैं कि div अज्ञात है, इसलिए मैं किसी भी कोड उदाहरणों में आपकी सहायता नहीं कर सकता।

स्रोत

2015-02-03 21:19:14 atastrumf

मेरे प्रश्न को देखने के लिए धन्यवाद। मैंने इनपुट जोड़ा [प्रकार = खोज] {- वेबकिट-उपस्थिति: कोई नहीं;} और यह किसी भी तरह से मेरी समस्या को प्रभावित नहीं कर रहा था। अभी भी एक ड्रॉपबॉक्स पॉप अप है और मुझे अभी भी पता नहीं है कि इसे कैसे शैलीबद्ध किया जाए। – drewsmug

@drewsmug यकीन है कि इससे मदद नहीं मिली है, मैंने उस हिस्से को याद किया है जिसे आप ड्रॉपडाउन को इनपुट बॉक्स में स्टाइल करने की कोशिश नहीं कर रहे हैं .. मैंने अपनी प्रतिक्रिया संपादित की, लेकिन वर्तमान में सीमित जानकारी के साथ, मैं आपको वह सब कुछ दे सकता हूं। – atastrumf

हालांकि मुझे यकीन नहीं है कि आप किस ऑटो पूर्ण नियंत्रण का उपयोग कर रहे हैं।

Sample Working Demo

आप jQuery के स्वत: पूर्ण का उपयोग कर रहे हैं तो आप सीएसएस

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

नीचे का उपयोग कर सीएसएस ऊपर लाल के लिए अक्षरों का रंग बदल जाएगा और फिर बनाने के कोने dropdownoptions के लिए पूर्ण होना लक्षित कर सकते हैं।

पूरा कोड:

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

स्रोत

2015-02-03 22:24:52 Jatin

मुझे एएसपी नहीं समझ रहा है: टेक्स्टबॉक्स सामग्री। ऐसा लगता है कि एएसपी कोड है। मैं अभी भी उलझन में हूं कि मैं ड्रॉपबॉक्स को कैसे लक्षित करता हूं .autocomplete वर्ग शैली का उपयोग करने के लिए मैं निर्दिष्ट करता हूं। यह एक तत्व नहीं है जिसे मैंने लिखा है, इसलिए मैं इसे "वर्ग = 'स्वत: पूर्ण' नहीं जोड़ सकता। – drewsmug

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

सुनिश्चित करें कि आप jQuery ui को पैकेज डाउनलोड किया है और सीएसएस और अपने html में js के लिंक प्रदान किया है।http://jqueryui.com/download/

सीएसएस फ़ाइल आप अधिभावी रहे jQuery-ui.css

स्रोत

2015-08-10 07:17:45

स्वत: पूर्ण ड्रॉपडाउन सूची कैसे बनाएं

उत्तर

संबंधित मुद्दे