दिलचस्प पोस्ट
क्या है क्यू = 0.5 स्वीकार करें * HTTP हेडर? खोजने के लिए आसान तरीका है कि दो अलग-अलग सूचियों में बिल्कुल समान तत्व हैं? के बीच अंतर । और: लुआ में कोको: फ्रेम और सीमा के बीच अंतर क्या है? डेल्फी कोड फ़ॉर्मेटर माइक्रोसॉफ्ट रोसेन बनाम कोडडॉम केवल पंक्ति लौटें अगर मूल्य मौजूद नहीं है सरणी वापस करने के लिए सी फंक्शन को घोषित करना Android स्टूडियो में लिंक किए गए स्रोत फ़ोल्डर को कैसे जोड़ें? XML-RPC और SOAP में क्या अंतर है? कैसे git इतिहास में फ़ाइलों से पाठ को स्थानापन्न करने के लिए? सशर्त का उपयोग करने के लाभ:? (टर्नर) ऑपरेटर जेनकिंस में कलाकृतियों को संग्रहित करें Android 4.1 और 4.2 पर एक सेवा के रूप में एंड्रॉइड भाषण मान्यता त्रुटि निर्माण: गंभीर त्रुटि: pcre.h: ऐसा कोई फ़ाइल या निर्देशिका नहीं

मैं पाठ इनपुट फ़ील्ड में एक "खोज" बटन कैसे जोड़ूं?

मैं इस साइट में एक के समान "खोज" तत्व कैसे बना सकता हूं?

यहां छवि विवरण दर्ज करें

यदि हम स्रोत को देखते हैं, तो उसके पास एक पाठ बॉक्स होता है जिसके बाद <span> टैग होता है।

 <input type="text" name="q" id="site-search-input" autocomplete="off" value="Search" class="gray" /> <span id="g-search-button"></span> 

मुझे एक समान "आवर्धक कांच" छवि कहाँ मिलती है?

Solutions Collecting From Web of "मैं पाठ इनपुट फ़ील्ड में एक "खोज" बटन कैसे जोड़ूं?"

चित्र को भूतपूर्व में रखें, उदाहरण के लिए background-image का उपयोग background-image , फिर उसे एक रिश्तेदार स्थिति दें और उसे बाएं पर ले जाएं ताकि यह खोज बॉक्स के सही अंत को ओवरलैप कर सके, उदाहरण के लिए:

 #g-search-button { display: inline-block; width: 16px; height: 16px; position: relative; left: -22px; top: 3px; background-color: black; /* Replace with your own image */ } 

JSBin पर कार्यरत उदाहरण

आपकी आंखें आपको धोखा दे रही हैं बटन टेक्स्ट बॉक्स में नहीं है पृष्ठभूमि छवि का उपयोग करने का तरीका नहीं है, क्योंकि यह क्लिक करने योग्य सबमिट बटन प्रदान नहीं करता है

आपको क्या करने की ज़रूरत है इनपुट के आस-पास एक रैपर डिवेल जोड़ें: पाठ और इनपुट: सबमिट करें

आवरण यह दिखेगा कि यह एक पाठ बॉक्स है, लेकिन वास्तव में एक पारदर्शी पाठ बॉक्स और एक सबमिट बटन होगा। आपको इनपुट के लिए विशेष रूप से शैलियों को हटाने की आवश्यकता होगी: पाठ और इनपुट: तत्व सबमिट करें

 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Input Example</title> <style type="text/css"> /* <![CDATA[ */ .search { border: 1px solid #000000; width: 200px; } .search input[type="text"] { background: none; border: 0 none; float: left; height: 1.5em; line-height: 1.5em; margin: 0; padding: 3px 0; width: 180px; } .search input[type="submit"] { background: #CCCCCC url(path/to/image.jpg); border: 0 none; height: 1.5em; line-height: 1.5em; margin: 0; padding: 3px 0; text-indent: 100px; width: 20px; } /* ]]> */ </style> </head> <body> <form ...> <div class="search"> <input type="text" /> <input type="submit" /> </div> </form> </body> </html> 

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

संपादित करें: आप अपनी खुद की बढ़ाई हुई छवि बना सकते हैं, वे 20x20px पारदर्शी पीएनजी में बहुत आसान बनाते हैं।

यदि आप Google क्रोम में पेज देखते हैं, तो खोज बटन पर राइट-क्लिक करें और "तत्व का निरीक्षण करें" चुनें, आप इस प्रभाव को प्राप्त करने के लिए सीएसएस का उपयोग कर सकेंगे।

यदि आप सीएसएस से परिचित नहीं हैं, तो मैं 'सीएसएस: डेफिनिटि गाइड' की अच्छी तरह से सिफारिश करता हूं।

Iconspedia की तरह एक साइट में कई समान चिह्न हैं जो समान हैं।

जहां भी आपको आइकन मिलता है, यह सुनिश्चित करने के लिए सावधान रहें कि आपके पास इसे आपके आवेदन में उपयोग करने के अधिकार हैं। कई ग्राफिक्स संरक्षित हैं और कुछ में प्रतिबंधात्मक लाइसेंस हैं

मैं एक नया jQuery प्लगइन जो मैंने लिखा था प्लग करना चाहते हैं क्योंकि मुझे लगता है कि यह ओपी के अनुरोध के उत्तर में है। इसे jQuery.iconfield कहा जाता है: https://github.com/yotamofek/jquery.iconfield

यह आपको आसानी से अपने टेक्स्ट फ़ील्ड के बाईं ओर एक आइकन जोड़ देता है। आइकन को एक बटन के रूप में उपयोग करने के लिए, आप आसानी से 'iconfield.click' ईवेंट पर बाध्य कर सकते हैं, जो उपयोगकर्ता द्वारा आइकन को क्लिक करते समय ट्रिगर किया जाता है। माउस कर्सर को बदलने का ख्याल भी रखता है जब माउस आइकन पर मँडरा होता है।

उदाहरण के लिए:

 $('#search-field').iconfield( { 'image-url': 'imgs/search.png', // url of icon 'icon-cursor': 'pointer' // cursor to show when hovering over icon } ); $('#search-field').on( 'iconfield.click', function( ) { $('#search-form').submit() } 

मुझे अपने काम पर कुछ प्रतिक्रिया प्राप्त करना अच्छा लगेगा

यदि आप मैदान पर पृष्ठभूमि की छवि का उपयोग करते हैं तो क्लिक क्रिया प्राप्त करने के लिए इसके साथ बाध्य करने का कोई रास्ता नहीं है। तो समाधान का एक अलग खोज फ़ील्ड और छवि होना है, ताकि आप छवि पर jQuery में क्लिक ईवेंट को बाँध सकें। यहाँ बेला:

http://jsfiddle.net/Lzm1k4r8/23/

आप left: समायोजित कर सकते हैं left: खोज बॉक्स के बाईं या दाईं ओर की स्थिति

उपयोगकर्ता फ़ीडबैक के साथ मदद करने के लिए जब आप आवर्धक ग्लास पर होवर कर रहे हों तो अपने माउस पर पॉइंटर आइकन क्यों नहीं जोड़ें? बस इसे अपने सीएसएस के लिए:

। खोज: हॉवर {कर्सर: सूचक; }