1. घर
  2. सवाल और जवाब
  3. इनपुट जोड़ना और एक दृश्य इनपुट फ़ील्ड में चयन करना

इनपुट जोड़ना और एक दृश्य इनपुट फ़ील्ड में चयन करना

2011-11-28 12 views
6

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

------------------------------------------------ 
|        Select text [v] | 
------------------------------------------------

आप देख सकते हैं इनपुट के बाएं हाथ की भाग है, जहां आप इनपुट तत्व के लिए स्ट्रिंग टाइप करेंगे, और ड्रॉप डाउन का चयन इनपुट तत्व की सीमा में इंसेट है ([v] सूची ड्रॉप करने के लिए नीचे तीर बटन होना चाहिए)। इस तरह के सुझावों या सुझावों को स्टाइल करने के तरीके के बारे में कोई भी लिंक स्वागत है।

स्रोत

2011-11-28 somecallmemike

+0

तो मूल रूप से एक पाठ बॉक्स आप में टाइप करें और एक ड्रॉप-डाउन से संभावनाओं से मेल खाते की एक सूची प्राप्त कर सकते हैं? –

+0

यदि यह मार्क बी बी वर्णन कर रहा है तो आप वास्तव में एक डातालिस्ट – albert

+0

@Marc का उपयोग करना चाहते हैं, वास्तव में नहीं। मैं एक इनपुट, और एक ड्रॉप डाउन करना चाहता हूँ। ड्रॉप डाउन "ग्राहक, संपर्क, फोन नंबर" जैसे खोज शब्द होंगे, और इनपुट टेक्स्ट आपके द्वारा चुने गए खोज शब्द से संबंधित होगा। मैं बस स्क्रीन पर एक इनपुट डाल सकता था, फिर उसके बगल में एक बूंद नीचे और एक ही चीज़ को पूरा कर सकता था, लेकिन मैं चयन मेनू को चुनिंदा सीमा में जोड़ना चाहता हूं क्योंकि मुझे लगता है कि यह वास्तव में चिकना दिखता है। – somecallmemike

उत्तर

2

कुछ इस तरह पूरा करना चाहिए कि आप क्या चाहते।

http://jsfiddle.net/rhoenig/xFQMf/

स्रोत

2011-11-28 21:44:36 Robert

+0

यह मेरे फ़ायरफ़ॉक्स में काम नहीं करता प्रतीत होता है। – Qqwy

+0

@Qqwy अगर आप लिंक पर क्लिक करते हैं तो क्या आप परिणाम अनुभाग को टेक्स्ट/बॉक्स के साथ दाईं ओर ले जाते हैं? यदि ऐसा है तो आप यह दिखाने के लिए प्रश्न संपादित कर सकते हैं कि आपकी फ़ाइल कैसा दिखती है। – Robert

+0

मुझे बिल्कुल चयन नहीं दिख रहा है। मैं अवधि लेबल, और एक इनपुट बॉक्स देखते हैं। कोई चयन नहीं है। – Qqwy

7

निम्न उदाहरण बहुत सरल है। यह मुख्य बात दिखाता है जो आप करना चाहते हैं: चूंकि फ़ॉर्म तत्वों को सीएसएस के साथ स्टाइल करने में सक्षम हैं, बाकी सब कुछ, यह बहुत सरल है। इस उदाहरण में अभी भी गैर-फ़ायरफ़ॉक्स ब्राउज़र वाले कुछ स्टाइल समस्याएं हैं, मैं इसे थोड़ा सुधार दूंगा।

<html> 
<head> 
    <style> 
     select#selectoption { 
      border-left:none; 
      padding:none; 
     } 

     input#datahere { 
      position:relative; 
      border-right:none; 
      padding:none; 
     } 
     </style> 
    </head> 
<body> 
    The form below is a simple example. 
<form name ="explanation"action="test" method="post"> 
<input type="text" id="datahere" /> 
<select id="selectoption" /><option>test</option><option>test2</option></select> 

</form> 


</body> 
</html>

संपादित करें: आप क्या चाहते हैं यहाँ देखा जा सकता का एक ऑनलाइन उदाहरण: https://github.com/eredacokmerke/dm-i

स्रोत

2011-11-28 21:53:28 Qqwy

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

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