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

Question

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

लाइव संस्करण में: Tidal Force theme

Answer 1

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

दूसरे शब्दों में, वे इन दो सीएसएस नियम है:

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

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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

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

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

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

Answer 5

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

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

Answer 6

मुझे यह सबसे अच्छा और साफ समाधान मिल गया है। का उपयोग करते हुए पाठ इंडेंट 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" /> 

Answer 7

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

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

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

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

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