एक इनपुट बॉक्स

Question

Put icon inside input element in a form

लेकिन यह कैसे मैं आइकन के अंदर और दाईं ओर बॉक्स से पर प्राप्त करने के लिए इसी तरह के अंदर एक छवि लाना?

Answer 1

इस प्रयास करें:

background: url(images/icon.png) no-repeat right center; 

इस सीएसएस के लिए विवरण इस प्रकार है:

पृष्ठभूमि: [छवि के लिए URL] [दोहराने नहीं है] [क्षैतिज स्थिति] [ऊर्ध्वाधर स्थिति]

Answer 2

padding-left से padding-right को छोड़कर, और पृष्ठभूमि की स्थिति बदलने के अलावा वही जवाब।

कुछ की तरह:

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

Answer 3

Bazzz's answer के अतिरिक्त के रूप में, यदि आप सही सही सीमा के खिलाफ आइकन नहीं करना चाहते, तो आप गद्दी सही पक्ष पर निर्दिष्ट कर सकते हैं।

background: url(images/icon.png) no-repeat right 10px center; 

यह आइकन को दाईं ओर रखेगा, लेकिन इसे किनारे से 10 पिक्सेल रखें। तो, सीएसएस विवरण इस प्रकार दिखाई देगा:

पृष्ठभूमि: [आइकन के लिए URL] छवि और एसवीजी का उपयोग करते हुए [निर्दिष्ट नहीं दोहरा] [क्षैतिज स्थिति] [दाईं ओर गद्दी] [ऊर्ध्वाधर स्थिति]

Answer 4

। पैडिंग सभी ब्राउज़रों (मंगल 2017) में अच्छी तरह से काम करता है

छवि फ़ाइल

.date_element { 
    background-image: url(../img/calendar.png); 
    background-repeat: no-repeat; 
    background-position: right center; 
    background-origin: content-box; 
} 

एसवीजी फ़ाइल

.date_element { 
    background-image: url(../img/calendar.svg); 
    background-repeat: no-repeat; 
    background-position: right center; 
    background-origin: content-box; 
    background-size: 2.5rem 2.5rem; 
}