উত্তর:
আপনার লিঙ্ক করা সাইটটি এটি বন্ধ করতে সিএসএস ট্রিকসের সংমিশ্রণ ব্যবহার করে। প্রথমত, এটি <input>উপাদানটির জন্য একটি পটভূমি-চিত্র ব্যবহার করে । তারপরে, কার্সারটিকে ধাক্কা দেওয়ার জন্য এটি ব্যবহার করে padding-left।
অন্য কথায়, তাদের এই দুটি সিএসএস বিধি রয়েছে:
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;অন্যদের পোস্ট করা সিএসএস সমাধানগুলি এটি সম্পাদন করার সর্বোত্তম উপায়।
যদি এটি আপনাকে কোনও সমস্যা দেয় (আই 6 পড়ুন), আপনি একটি ডিভের ভিতরে সীমান্তহীন ইনপুটও ব্যবহার করতে পারেন।
<div style="border: 1px solid #DDD;">
<img src="icon.png"/>
<input style="border: none;"/>
</div>"পরিষ্কার" হিসাবে নয়, তবে পুরানো ব্রাউজারগুলিতে কাজ করা উচিত।
ব্যাকগ্রাউন্ড-চিত্রবিহীন সমাধান:
#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>আপনি এটি চেষ্টা করতে পারেন:
input[type='text'] {
background-image: url(images/comment-author.gif);
background-position: 7px 7px;
background-repeat: no-repeat;
}আমি এটির সর্বোত্তম এবং পরিষ্কার সমাধানটি খুঁজে পাই। ব্যবহার টেক্সট ইন্ডেন্ট উপর inputউপাদান
সিএসএস:
#icon{
background-image:url(../images/icons/dollar.png);
background-repeat: no-repeat;
background-position: 2px 3px;
}এইচটিএমএল:
<input id="icon" style="text-indent:17px;" type="text" placeholder="Username" />একটি ইনপুটটির ভিতরে আইকনটি অবস্থানের একটি সহজ এবং সহজ উপায় হ'ল নীচের কোডে প্রদর্শিত পজিশনের সিএসএস সম্পত্তিটি ব্যবহার করা। দ্রষ্টব্য: আমি স্বচ্ছতার উদ্দেশ্যে কোডটি সহজীকরণ করেছি।
#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>input { border: none; }যুক্ত #input-container { border: 1px solid #000; }করতে হবে।
.icon{
background: url(1.jpg) no-repeat;
padding-left:25px;
}আপনার সিএসএস ফাইলে উপরের ট্যাগগুলি যুক্ত করুন এবং নির্দিষ্ট শ্রেণিটি ব্যবহার করুন।
এটি আমার পক্ষে কাজ করে:
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>আপনি এটি চেষ্টা করতে পারেন: বুটস্ট্র্যাপ -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>
আপনার সিএসএসে কেবল পটভূমির সম্পত্তি ব্যবহার করুন।
<input id="foo" type="text" />
#foo
{
background: url(/img/foo.png);
}আমার এমন অবস্থা ছিল situation এটি কারণ কাজ করে না 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বৈশিষ্ট্যগুলি সমাধানের জন্য গুরুত্বপূর্ণ নয়। আমি স্রেফ আমার মূল কোডটি প্রতিলিপি করেছি।
backgroundএটি একটি শর্টহ্যান্ড সম্পত্তি নাম যা আপনি সমস্ত পটভূমি বৈশিষ্ট্য একবারে toাকতে ব্যবহার করেন: background: [color] [image url] [repeat] [position]এবং এজন্য আপনার রঙ সব কিছু ওভাররাইট করে চলেছে । আপনি এটি এটিকে রেখে দিতে এবং সম্পত্তিটির নতুন নামকরণ করতে পারেনbackground-color
backgroundএকটি শর্টহ্যান্ড সম্পত্তির নাম। শর্টহ্যান্ড ব্যবহার না করা, তবে background-colorরঙের সম্পত্তিটির জন্য ব্যবহার করা (আপনি একটি রঙ এবং একটি চিত্র উভয়ই চান তবে ধরে নেওয়া) একটি আরও ভাল সমাধান।
ফন্ট-আইকন সহ ব্যবহার করা হচ্ছে
<input name="foo" type="text" placeholder="">অথবা
<input id="foo" type="text" />
#foo::before
{
font-family: 'FontAwesome';
color:red;
position: relative;
left: -5px;
content: "\f007";
} <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>উদাহরণস্বরূপ আপনি এটি ব্যবহার করতে পারেন: লুকানো ইনপুট সহ লেবেল (আইকন উপস্থিত রয়েছে)।
শুরুতে আপনার ইনপুটটির জন্য এই CSS ক্লাসটি ব্যবহার করুন, তারপরে সেই অনুযায়ী কাস্টমাইজ করুন:
.inp-icon{
background: url(https://i.imgur.com/kSROoEB.png)no-repeat 100%;
background-size: 16px;
}<input class="inp-icon" type="text">