ضع أيقونة داخل عنصر الإدخال في شكل

Question

كيف أضع أيقونة داخل عنصر إدخال النموذج؟

نسخة حية في: مظهر قوة المد والجزر

Answer 1

يستخدم الموقع الذي ترتبط فيه مجموعة من الحيل CSS لسحب ذلك. أولا، يستخدم صورة خلفية ل <input> جزء. ثم، من أجل دفع المؤشر، يستخدم padding-left.

وبعبارة أخرى، لديهم هذين القواعد في CSS:

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

Answer 2

حلول CSS المنشورة من قبل الآخرين هي أفضل طريقة لإنجاز هذا.

إذا كان ذلك يجب أن يمنحك أي مشاكل (اقرأ IE6)، يمكنك أيضا استخدام مدخلات بلا حدود داخل DIV.

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

ليس "نظيفا"، ولكن يجب أن تعمل على المتصفحات القديمة.

Answer 3

يمكنك تجربة هذا:

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

Answer 4

حل بدون صور الخلفية:

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

أجد هذا أفضل وحل الأنظف لذلك. استخدام المسافة البادئة النص على ال input جزء

CSS:

#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" />

Answer 6

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

أضف العلامات فوقها إلى ملف CSS واستخدم الفئة المحددة.

Answer 7

هذا يعمل بالنسبة لي:

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>

Answer 8

ما عليك سوى استخدام خاصية الخلفية في CSS.

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

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

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

Answer 10

كان لدي موقف مثل هذا. لم تنجح بسبب 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 الخصائص ليست مهمة للحل. أنا فقط نسكت التعليمات البرمجية الأصلية.

Answer 11

يمكنك تجربة هذا: bootstrap-4 بيتا
https://www.codeply.com/go/w25zybehec.

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

طريقة بسيطة وسهلة لوضع أيقونة داخل المدخلات هي استخدام خاصية موضع CSS كما هو موضح في التعليمات البرمجية أدناه. ملاحظة: لقد قمت بتبسيط التعليمات البرمجية لأغراض الوضوح.

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>

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

استخدم فئة CSS هذه لإدخالك في البداية، ثم تخصيص وفقا لذلك:

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

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