เมื่อเร็ว ๆ นี้ฉันกำลังเขียนเว็บไซต์ที่แนะนำทนายความไปยังแผนกต้อนรับ มีปัญหาในช่องค้นหาด้านบน ฉันต้องการวางไอคอนการค้นหาไว้ในช่องค้นหา แต่มันก็ไม่น่าพอใจมากหลังจากผ่านไปนาน ...
โดยไม่ต้องกังวลใจเพิ่มเติมให้ตรงไปที่หัวข้อ:
ไอเดียพื้นฐาน
ในความเป็นจริงใส่กล่องอินพุตและไอคอนที่อยู่ด้านหลังใน DIV จากนั้นตั้งค่า border ของกล่องอินพุตเป็น 0PX และในที่สุดก็ตั้ง border ของ DIV เป็นเส้นขอบด้านนอกสุดท้าย
เราจะอัปโหลดรหัสโดยตรง:
html:
<div class = search> <form action = http: //baidu.com> <ประเภทอินพุต = text placeholder = โปรดป้อนทนายความหรือความเชี่ยวชาญที่คุณค้นหา> <pan> <a href =#> <img src = img/icon1.png alt => </a>
CSS:
นี่คือรูปแบบของการตั้งค่า div ทั้งหมดภายนอก
.Search {Width: 250px; ความสูง: 35px; ชายแดน: 1px Solid White; แนวชายแดน: 30px;}นี่คือการตั้งค่าความยาวและความกว้างของกล่องอินพุตภายใน boder คือ 0px ขนาดตัวอักษรภายในและเส้นขอบจะไม่สว่างเมื่อคลิก (โครงร่าง: ไม่มี)
ตั้งค่าความโปร่งใสที่นี่โดยใช้ rgba() คุณสมบัติสุดท้ายคือความโปร่งใส (ระหว่าง 0-1)
อินพุต {width: 200px; ความสูง: 35px; ชายแดน: 0; ขนาดตัวอักษร: 14px; โครงร่าง: ไม่มี; พื้นหลังสี: RGBA (255, 255, 255, 0); สี: สีขาว; ขนาดตัวอักษร: 16px; มาร์จิ้น: 0 10px; สรุปนี่คือบทความเกี่ยวกับรหัสการใช้งานของไอคอนการเพิ่ม HTML ในกล่องอินพุตโปร่งใส สำหรับเนื้อหาไอคอนกล่องอินพุต HTML ที่เกี่ยวข้องเพิ่มเติมโปรดค้นหาบทความก่อนหน้าจาก wulin.com หรือดำเนินการเรียกดูบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าทุกคนจะสนับสนุน Wulin.com ในอนาคต!