एक रूप में इनपुट तत्व के अंदर आइकन रखो

Question

मैं किसी प्रपत्र के इनपुट तत्व के अंदर एक आइकन कैसे डालूं?

पर लाइव संस्करण: ज्वारीय बल थीम

Comments

@IvanSokalskiy यह मान रहा है कि कोई व्यक्ति बूटस्ट्रैप का उपयोग कर रहा है। हर कोई जो इस पार नहीं आता है वह बूटस्ट्रैप का उपयोग करेगा!

— बैरी माइकल डोयले

Answer 1

आपके द्वारा लिंक की गई साइट इसे खींचने के लिए CSS ट्रिक के संयोजन का उपयोग करती है। सबसे पहले, यह <input>तत्व के लिए एक पृष्ठभूमि-छवि का उपयोग करता है । फिर, कर्सर को ऊपर धकेलने के लिए, यह उपयोग करता हैpadding-left ।

दूसरे शब्दों में, उनके पास ये दो सीएसएस नियम हैं:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

Comments

क्या आप शीर्ष और बाएँ पैरामीटर (7px 7 px) और अन्य विशेषताओं के बारे में अधिक बता सकते हैं? यह सहायक होना चाहिए।

— QMaster

सलाह: IE 8. का उपयोग और समर्थन करना बंद करें

— एक कोडर

मैं इनपुट क्षेत्र के दाईं ओर छवि को कैसे संरेखित कर सकता हूं?

— इशांक्षी

बैकग्राउंड इमेज के साथ समस्या यह है कि क्रोम का

— ऑटोफिल

सही उपयोग के लिए संरेखित करने के लिए: पृष्ठभूमि-स्थिति: सही;

— अस्तित्व के प्रति

Answer 2

दूसरों के द्वारा पोस्ट किए गए CSS समाधान इसे पूरा करने का सबसे अच्छा तरीका है।

अगर इससे आपको कोई समस्या आती है (IE6 पढ़ें), तो आप एक div के अंदर एक बॉर्डरलेस इनपुट का भी उपयोग कर सकते हैं।

<div style="border: 1px solid #DDD;">
    <img src="icon.png"/>
    <input style="border: none;"/>
</div>

"स्वच्छ" के रूप में नहीं, बल्कि पुराने ब्राउज़रों पर काम करना चाहिए।

Comments

इस जवाब के लिए एक अच्छा इसके अलावा। कभी-कभी समस्याएँ देता है और उनमें से किसी एक को हल करने का यह एक अच्छा तरीका है। इसके बदले मेरे साथ काम किया।

— रॉस

आदानों के अंदर और अधिक जटिल संरचनाओं को जोड़ने का अच्छा तरीका!

— २५'१:51 को १५:५५

@jonhue, मैं इसकी अनुशंसा नहीं करूंगा जब तक कि आप पिछले दशक में नहीं रह रहे हैं और IE6 का समर्थन करने की आवश्यकता है। फिर भी, मैं इसे "साफ" नहीं कहूंगा।

— हरपो

@harpo आप इनपुट के अंदर लिंक तब कैसे शामिल करेंगे?

— २०'१:

Answer 3

पृष्ठभूमि-छवियों के बिना एक समाधान:

#input_container {
    position:relative;
    padding:0 0 0 20px;
    margin:0 20px;
    background:#ddd;
    direction: rtl;
    width: 200px;
}
#input {
    height:20px;
    margin:0;
    padding-right: 30px;
    width: 100%;
}
#input_img {
    position:absolute;
    bottom:2px;
    right:5px;
    width:24px;
    height:24px;
}

<div id="input_container">
    <input type="text" id="input" value>
    <img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>

Answer 4

आप यह कोशिश कर सकते हैं:

input[type='text'] {
    background-image: url(images/comment-author.gif);
    background-position: 7px 7px;
    background-repeat: no-repeat;
}

Answer 5

मुझे इसका सबसे अच्छा और साफ समाधान मिल गया है। तत्व पर पाठ-इंडेंट का उपयोग करनाinput

सीएसएस:

#icon{
background-image:url(../images/icons/dollar.png); 
background-repeat: no-repeat; 
background-position: 2px 3px;
}

HTML:

<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />

Comments

मैं टेक्स्ट-इंडेंट का समर्थन कर रहा हूं क्योंकि पैडिंग-लेफ्ट फील्ड की चौड़ाई बढ़ाएगा और यह मूल तत्व से बाहर निकल जाएगा।

— कोस्टिएंटिन

आपने #icon css के बजाय स्टाइल इनलाइन क्यों लगाई?

— व्यालियम जुड

@YlliamJudd यह प्रदर्शन उद्देश्य के लिए है :)

— Rust

आपने कक्षा के बजाय आईडी का उपयोग क्यों किया?

— माजिद सवलनपोर

Answer 6

एक इनपुट के अंदर एक आइकन स्थिति के लिए एक सरल और आसान तरीका स्थिति सीएसएस संपत्ति का उपयोग करना है जैसा कि नीचे दिए गए कोड में दिखाया गया है। नोट: मैंने स्पष्टता के उद्देश्य से कोड को सरल बनाया है।

1. इनपुट और आइकन के आसपास कंटेनर बनाएं।
2. सापेक्ष के रूप में कंटेनर की स्थिति निर्धारित करें
3. आइकन को स्थिति निरपेक्ष के रूप में सेट करें। यह आइकन को आसपास के कंटेनर के सापेक्ष स्थिति देगा।
4. कंटेनर में आइकन की स्थिति के लिए ऊपर, बाएं, नीचे, दाएं दोनों का उपयोग करें।
5. इनपुट के अंदर पैडिंग सेट करें ताकि टेक्स्ट आइकन को ओवरलैप न करे।

#input-container {
  position: relative;
}

#input-container > img {
  position: absolute;
  top: 12px;
  left: 15px;
}

#input-container > input {
  padding-left: 40px;
}

<div id="input-container">
  <img/>
  <input/>
</div>

Comments

स्वच्छ और सरल, हाँ। आपको इनपुट बॉर्डर को भी हटाना चाहिए input { border: none; }और बॉर्डर को जोड़ने के #input-container { border: 1px solid #000; }लिए यह सुनिश्चित करना चाहिए कि छवि अंदर है और वास्तव में इनपुट का हिस्सा है।

— मारियो वर्नर

@MarioWerner उन्होंने इनपुट के अंदर की छवि को आगे बढ़ाया, सीमा हैक करने की कोई आवश्यकता नहीं है, यही सुंदरता है। मैं विचार का उपयोग करने जा रहा हूं।

— मूर्ख

Answer 7

.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}

अपनी सीएसएस फ़ाइल में उपरोक्त टैग जोड़ें और निर्दिष्ट वर्ग का उपयोग करें।

Answer 8

यह मेरे लिए काम करता है:

input.valid {
   border-color: #28a745;
   padding-right: 30px;
   background-image: url('https://www.stephenwadechryslerdodgejeep.com/wp-content/plugins/pm-motors-plugin/modules/vehicle_save/images/check.png');
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: right center;
}

<form>
<label for="name">Name</label>
<input class="valid" type="text" name="name" />
</form>

Comments

छवि गायब हो जाती है जब क्रोम पर स्वत: पूर्ण होता है

— नेपच्यून

यदि आप "सेव" आइकन का उपयोग करते हैं, तो आप छवि को क्लिक करने योग्य कैसे बनाते हैं?

— user460114

यह मेरे लिए मेरे हाइब्रिड ऐप के लिए काम करता है, मैंने छवि डालने के बाद पूरे इनपुट बॉक्स को क्लिक करने योग्य बना दिया।

— शिवम् श्रीवास्तव

Answer 9

आप यह कोशिश कर सकते हैं: बूटस्ट्रैप -4 बीटा
https://www.codeply.com/go/W25zyByhec

<div class="container">
            <form>
                <div class="row">
                    <div class="input-group mb-3 col-sm-6">
                      <input type="text" class="form-control border-right-0" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                        <div class="input-group-prepend bg-white">
                            <span class="input-group-text border-left-0 rounded-right bg-white" id="basic-addon1"><i class="fas fa-search"></i></span>
                        </div>
                    </div>
                </div>
            </form>
        </div>





Answer 10

बस अपने सीएसएस में पृष्ठभूमि संपत्ति का उपयोग करें।

<input id="foo" type="text" />

#foo
{
    background: url(/img/foo.png);
}

Answer 11

मेरे पास इस तरह की स्थिति थी। की वजह से इसे काम नहीं किया background: #ebebeb;। मैं इनपुट क्षेत्र पर पृष्ठभूमि रखना चाहता था और वह संपत्ति लगातार पृष्ठभूमि छवि के शीर्ष पर दिखाई दे रही थी, और मैं छवि नहीं देख सकता था! इसलिए, मैंने backgroundसंपत्ति को संपत्ति से ऊपर होने के लिए स्थानांतरित कर दिया background-imageऔर यह काम किया।

input[type='text'] {
    border: 0;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
    background: #ebebeb;
}

मेरे मामले का हल था:

input[type='text'] {
    border: 0;
    background: #ebebeb;
    background-image: url('../img/search.png');
    background-position: 9px 20px;
    background-repeat: no-repeat;
    text-align: center;
    padding: 14px;
}

बस उल्लेख करने के लिए border, paddingऔर text-alignगुण समाधान के लिए महत्वपूर्ण नहीं हैं। मैंने सिर्फ अपना मूल कोड दोहराया है।

Comments

यह सुपर पुराना है और मुझे आशा है कि शायद आपने एक साल पहले से सीखा है, लेकिन backgroundएक आशुलिपि संपत्ति का नाम है जिसका उपयोग आप एक बार में सभी पृष्ठभूमि गुणों को कवर करने के लिए करते हैं: background: [color] [image url] [repeat] [position]और इसीलिए आपका रंग सब कुछ ओवरराइट कर रहा था। आप इसे जगह पर छोड़ भी सकते थे और संपत्ति का नाम बदलकरbackground-color

— borbulon

@borbulon हाँ आप सही हैं। शॉर्टहैंड प्रॉपर्टी नाम का उपयोग करना लगभग हमेशा सबसे अच्छा होता है, उस पर पूरी तरह से सहमत हों। लेकिन इस पोस्ट का उद्देश्य कभी-कभी गुणों के उस क्रम को इंगित करना है, और उन 'छोटे' सीएसएस नियमों से बहुत निराशा हो सकती है, खासकर विकास में नए लोगों को।

— फंतासी

पूरी तरह से सहमत हैं, लेकिन बिंदु अभी भी खड़ा है: backgroundएक आशुलिपि संपत्ति का नाम है। एक बेहतर समाधान शॉर्टहैंड का उपयोग नहीं करना होता, लेकिन background-colorरंग संपत्ति के लिए उपयोग करें (यह मानते हुए कि आप एक रंग और एक छवि दोनों चाहते हैं)।

— बोरबुलोन

Answer 12

फ़ॉन्ट-आइकन के साथ उपयोग करना

<input name="foo" type="text" placeholder="&#61447;">

या

<input id="foo" type="text" />

#foo::before
{
  font-family: 'FontAwesome';
  color:red;
  position: relative;
  left: -5px;
  content: "\f007";    
}

Comments

ऐसा लगता है कि: पहले इनपुट तत्व को लागू नहीं किया जा सकता है।

— विष्णुजा

Answer 13

 <label for="fileEdit">
    <i class="fa fa-cloud-upload">
    </i>
    <input id="fileEdit" class="hidden" type="file" name="addImg" ng-file-change="onImageChange( $files )" ng-multiple="false" accept="{{ contentType }}"/>
  </label>

उदाहरण के लिए आप इसका उपयोग कर सकते हैं: छिपे हुए इनपुट के साथ लेबल (आइकन मौजूद है)।

Answer 14

प्रारंभ में अपने इनपुट के लिए इस सीएसएस वर्ग का उपयोग करें, फिर तदनुसार अनुकूलित करें:

    
 .inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
 }

<input class="inp-icon" type="text">

Comments

क्या आप जानते हैं कि केवल इस छवि के लिए क्लिक ईवेंट कैसे सेट करें?

— अर्जुन

Answer 15

यह मेरे लिए अधिक या कम मानक रूपों के लिए काम करता है:

  <button type="submit" value="Submit" name="ButtonType" id="whateveristheId" class="button-class">Submit<img src="/img/selectedImage.png" alt=""></button>