في الآونة الأخيرة ، أكتب موقع ويب يوصي بمحام إلى مكتب الاستقبال. كانت هناك مشكلة في مربع البحث أعلاه. أردت أن أضع أيقونة البحث في مربع البحث ، لكنها لم تكن مرضية للغاية بعد فترة طويلة ...
دون مزيد من اللغط ، دعنا نذهب مباشرة إلى الموضوع:
الأفكار الأساسية
في الواقع ، ضع مربع الإدخال والرمز الذي يقف خلفه في DIV ، ثم قم بتعيين border مربع الإدخال على 0 بكسل ، وأخيراً حدد border DIV على الحدود الخارجية النهائية
سنقوم بتحميل الرمز مباشرة:
HTML:
<div class = search> <form action = http: //baidu.com> <input type = text placehold = الرجاء إدخال المحامي أو الخبرة التي بحثتها> <span> <a href =#> <img src = img/icon1.png alt => </a> </span> </form>
CSS:
هذا هو نمط تعيين DIV بأكمله في الخارج
.Search {العرض: 250px ؛ الارتفاع: 35 بكسل ؛ الحدود: 1 بكسل أبيض صلب ؛ الحدود الحدودية: 30 بكسل ؛}فيما يلي ضبط طول وعرض مربع الإدخال في الداخل ، فإن البود هو 0 بكسل ، وحجم الخط في الداخل ، ولن يكون الحدود مشرقًا عند النقر عليه (مخطط: لا شيء)
حدد الشفافية هنا باستخدام rgba() ، آخر خاصية هي الشفافية (بين 0-1)
الإدخال {العرض: 200 بكسل ؛ الارتفاع: 35 بكسل ؛ الحدود: 0 ؛ حجم الخط: 14px ؛ الخطوط العريضة: لا شيء ؛ خلفية اللون: RGBA (255 ، 255 ، 255 ، 0) ؛ اللون: أبيض. حجم الخط: 16 بكسل ؛ الهامش: 0 10px ؛ لخصهذه هي المقالة حول رمز تنفيذ HTML إضافة أيقونات في مربع الإدخال الشفاف. لمزيد من محتوى أيقونة مربع الإدخال الشفافة HTML ، يرجى البحث عن المقالات السابقة من Wulin.com أو متابعة تصفح المقالات ذات الصلة أدناه. آمل أن يدعم الجميع wulin.com في المستقبل!