ความคิดเห็น: CSS ที่ไม่ซ้ำกันที่ไม่ซ้ำกับ WebKit สามารถควบคุมสไตล์ข้อความได้ ด้วยเอฟเฟกต์ภาพเคลื่อนไหวและหมวดหมู่หลอกของ CSS3 เราสามารถสร้างกล่องอินพุตแอนิเมชั่นได้อย่างง่ายดายซึ่งเหมาะสำหรับการเข้าสู่ระบบระบบการค้นหา ฯลฯ หากคุณสนใจคุณสามารถอ้างถึงบทความต่อไปนี้หรือช่วยเหลือคุณ
ฉันไม่ได้เขียนบทความทางเทคนิคมาเป็นเวลานาน ฉันใช้ WebKit เป็นผู้ให้บริการเมื่อเร็ว ๆ นี้ แน่นอนว่าฉันต้องใช้ HTML5 และ CSS3 ในปริมาณมากซึ่งไม่เพียง แต่ช่วยลด JS จำนวนมาก แต่ยังทำให้มั่นใจได้ว่าราบรื่นขึ้นเมื่อเลือกกล่องโต้ตอบข้อความพรอมต์จะเบาลงและหายไปหลังจากอินพุต การปฏิบัติในปัจจุบันคือการเพิ่มฉลากด้านหลังแท็กอินพุต ใช้การควบคุม JS
หลังจาก HTML5 ปรากฏขึ้นเรามีวิธีที่ดีกว่า
<input type = "text" placeolder = "ชื่อผู้ใช้หรือที่อยู่อีเมล"/>
เราเห็นว่ามีแท็กตัวยึดที่สามารถใช้เป็นข้อความข้อความของผู้ใช้ สะดวกมาก แต่เพื่อให้ได้ความสมบูรณ์แบบที่ดีที่สุดเราจำเป็นต้องแบ่งเบาข้อความหลังจากเลือกหรือแก้ไขรูปแบบของไฟล์พรอมต์ เราควรทำอย่างไร?
อินพุต ::-webkit-input-placeholder {
สี: #999;
-webkit-transition: color.5s;
-
อินพุต: โฟกัส ::-webkit-input-placeholder, อินพุต: hover ::-webkit-input-placeholder {
สี: #C2C2C2;
-webkit-transition: color.5s;
-
-webkit-Input-Placeholder ซึ่งเป็น CSS ที่ไม่ซ้ำกันที่ไม่ซ้ำกันกับ WebKit สามารถควบคุมสไตล์ข้อความภายในได้ ด้วยเอฟเฟกต์ภาพเคลื่อนไหวและคลาสหลอกของ CSS3 เราสามารถสร้างกล่องอินพุตภาพเคลื่อนไหวได้อย่างง่ายดายซึ่งเหมาะสำหรับการเข้าสู่ระบบระบบการค้นหาและสถานที่อื่น ๆ แน่นอนว่าวิธีนี้จะไม่ทำงานเพื่อให้เข้ากันได้กับ IE6 อย่างไรก็ตาม IE9 ยังรองรับแท็กตัวยึดด้วย แต่ไม่สามารถแก้ไขสีได้
ดังนั้นฉันควรทำอย่างไรถ้าไม่ได้รับการสนับสนุน? คุณสามารถใช้ jQuery เพื่อช่วยได้ดังนั้นจึงไม่ได้อยู่ในขอบเขตของบทความนี้
ให้การสาธิตและที่อยู่ตัวอย่างจะต้องอยู่ในเบราว์เซอร์ WebKit เพื่อดูผลเต็มรูปแบบ ไม่สะดวกมากเหรอ?