กล่องอินพุตอินพุตเป็นส่วนประกอบที่ขาดไม่ได้ของหน้าเว็บ แต่แต่ละเบราว์เซอร์มีรูปแบบการแสดงผลที่แตกต่างกันของกล่องอินพุต
ตัวอย่างเช่น:
ภาพด้านบนเป็นกล่องอินพุตที่มาพร้อมกับ Google Chrome และ IE Browser และสไตล์นั้นไม่น่าพอใจดังนั้นส่วนใหญ่จะเขียนสไตล์ด้วยตัวเอง
นี่คือสไตล์กล่องข้อความง่ายๆ
อินพุต {border: 1px solid #ccc; Padding: 7px 0px; แนวชายแดน: 3px; / *แอตทริบิวต์ CSS3 IE ไม่รองรับ */ padding-left: 5px; - ภาพการทำซ้ำ:
ความหมายของคุณลักษณะสไตล์:
ชายแดน: 1px Solid #CCC; /*ตั้งค่าเส้นขอบกล่องอินพุตสีขนาดและเส้นประของแข็งของเส้นขอบ*//
Padding: 7px 0px; /* ตั้งค่าความสูงของกล่องอินพุตคุณสามารถใช้ความสูงได้ แต่ถ้าคุณใช้ความสูงเคอร์เซอร์ของกล่องอินพุตจะถูกวางไว้ด้านบนและต้องตั้งค่าสไตล์อื่น ๆ ให้แก้ไขและอาจไม่สามารถใช้งานได้
แนวชายแดน: 3px; / *สถานที่ให้บริการหินภายใน CSS3 คือไม่รองรับ */
Padding-Left: 5px; /*ปล่อยให้โฆษณาอยู่ห่างจากซ้าย 5 พิกเซลและที่จุดเริ่มต้นเคอร์เซอร์จะติดอยู่กับขอบของกล่องอินพุตทางด้านซ้าย*/
โดยพื้นฐานแล้วรูปแบบข้างต้นมักใช้กันทั่วไปในปัจจุบันและจากนั้นการตั้งค่าอื่น ๆ ของอินพุต
ตัวอย่างเช่น: ผู้ถือครองคุณลักษณะ
คุณสมบัตินี้มีเอฟเฟกต์ข้อความแจ้งในกล่องอินพุต คุณสมบัติ CSS3 ไม่รองรับเช่น
อินพุตคลิกเพื่อเรืองแสงเอฟเฟกต์พิเศษ:
อินพุต {border: 1px solid #ccc; Padding: 7px 0px; แนวชายแดน: 3px; Padding-Left: 5px; -webkit-box-shadow: inset 0 1px 1px RGBA (0,0,0, .075); Box-shadow: inset 0 1px 1px RGBA (0,0,0, .075); -webkit-transition: สีชายแดน Ease-In-Out.15s, -webkit-box-shadow Ease-Out.15s; -O-Transition: สีชายแดน Ease-In-Out.15s, Box-Shadow Ease-In-Out. 15s; การเปลี่ยนแปลง: ความสะดวกในการทำสีชายแดน-ออก. 15s, กล่องใส่ความสะดวกในกล่อง. 15s} อินพุต: โฟกัส {สีชายแดน: #66afe9; โครงร่าง: 0; -webkit-box-shadow: inset 0 1px 1px RGBA (0,0,0, .075), 0 0 8px RGBA (102,175,233, .6); Box-shadow: inset 0 1px 1px RGBA (0,0,0, .075), 0 0 8px RGBA (102,175,233, .6)}} ภาพการทำซ้ำ: