แบบฟอร์มติดต่อ 7 สไตล์ Make it Beautiful by CSS3
เผยแพร่แล้ว: 2017-08-21Contact form 7 เป็นปลั๊กอินยอดนิยมที่ใช้งานง่ายสำหรับเว็บไซต์ wordpress ทั้งหมด ดังนั้นทุกครั้งที่เราต้องปรับแต่ง css ให้สวยงาม แต่มันใช้เวลานานและน่ารำคาญในการสร้างสไตล์ทุกครั้งสำหรับแต่ละโครงการ
ดังนั้นนี่คือรูปแบบการติดต่อที่ง่ายและพร้อมใช้งานสำหรับแบบฟอร์มการติดต่อ 7 โดยใช้ css3
/********** ติดต่อแบบฟอร์ม 7 สไตล์ *************/
.wpcf7 อินพุต[type="text"],
.wpcf7 อินพุต[type="email"],
พื้นที่ข้อความ .wpcf7 {
เค้าร่าง:ไม่มี;
แสดง:บล็อก;
ความกว้าง:380px;
ช่องว่างภายใน:4px 8px;
border:1px เส้นประ #DBDBDB;
สี:#3F3F3F;
ตระกูลแบบอักษร:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
ขนาดตัวอักษร:14px;
/*รัศมี-เส้นขอบ*/
-webkit-border-รัศมี:2px;
-moz-border-รัศมี:2px;
รัศมีเส้นขอบ:2px;
/*การเปลี่ยนแปลง*/
-webkit-transition:พื้นหลัง 0.2 วินาทีเชิงเส้น, กล่องเงา 0.6 วินาทีเชิงเส้น;
-moz-transition: พื้นหลัง 0.2 วินาทีเชิงเส้น, กล่องเงา 0.6 วินาทีเชิงเส้น;
-o-การเปลี่ยนแปลง:พื้นหลังเชิงเส้น 0.2 วินาที, เงากล่อง 0.6 วินาทีเชิงเส้น;
การเปลี่ยนแปลง:พื้นหลัง 0.2 วินาทีเชิงเส้น, เงากล่อง 0.6 วินาทีเชิงเส้น;
}
.wpcf7 อินพุต[type="submit"],
อินพุต .wpcf7 [type="button"] {
พื้นหลัง-สี:#725f4c;
ความกว้าง:100%;
จัดข้อความ:ศูนย์;
การแปลงข้อความ:ตัวพิมพ์ใหญ่;
}
div#wpcf7-f201-p203-o1{
สีพื้นหลัง: #fbefde;
เส้นขอบ: 1px ทึบ #f28f27;
ช่องว่างภายใน:20px;
}
#wpcf7-f201-p203-o1 อินพุต[type="text"],
#wpcf7-f201-p203-o1 อินพุต[type="email"],
#wpcf7-f201-p203-o1 พื้นที่ข้อความ {
พื้นหลัง:#725f4c;
สี:#FFF;
ตระกูลแบบอักษร:lora, "Open Sans", sans-serif;
ตัวอักษรสไตล์:ตัวเอียง;
}
#wpcf7-f201-p203-o1 อินพุต[type="submit"],
#wpcf7-f201-p203-o1 อินพุต [type="button"] {
พื้นหลัง-สี:#725f4c;
ความกว้าง:100%;
จัดข้อความ:ศูนย์;
การแปลงข้อความ:ตัวพิมพ์ใหญ่;
}
div.wpcf7 {
ตำแหน่ง: ญาติ;
ความกว้าง: 440px;
ดัชนี z: 100;
ช่องว่างภายใน: 30px !สำคัญ;
เส้นขอบ: 1px ทึบ #383838;
พื้นหลัง: #D1D1D1;
พื้นหลัง: -moz-repeating-linear-gradient (-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
พื้นหลัง: -webkit-repeating-linear-gradient (-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
พื้นหลัง: -o-repeating-linear-gradient (-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
พื้นหลัง: การทำซ้ำเชิงเส้นไล่ระดับ (-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
-webkit-border-รัศมี: 8px;
-moz-border-รัศมี: 8px;
รัศมีเส้นขอบ: 8px;
-webkit-กล่องเงา: 0px 1px 6px #3F3F3F;
-moz-กล่องเงา: 0px 1px 6px #3F3F3F;
กล่องเงา: 0px 1px 6px #3F3F3F;
}
div.wpcf7:หลังจาก {
พื้นหลัง:#F9F9F9;
ระยะขอบ:10px;
ตำแหน่ง: สัมบูรณ์;
เนื้อหา :" ";
ด้านล่าง: 0;
ซ้าย: 0;
ขวา: 0;
ด้านบน: 0;
ดัชนี z: -1;
เส้นขอบ:1px #E5E5E5 ของแข็ง;
-webkit-border-รัศมี:8px;
-moz-border-รัศมี:8px;
รัศมีเส้นขอบ:8px;
}
อินพุต[ประเภท=ส่ง] {
เคอร์เซอร์:ตัวชี้;
พื้นหลัง:ไม่มี;
เส้นขอบ:ไม่มี;
ตระกูลแบบอักษร:'Alice', serif;
สี:#767676;
ขนาดตัวอักษร:18px;
ช่องว่างภายใน:10px 4px;
เส้นขอบ:1px ของแข็ง #E0E0E0;
ข้อความเงา: 0px 1px 1px #E8E8E8;
พื้นหลัง: rgb (247, 247, 247);
พื้นหลัง: -moz-linear-gradient(บนสุด, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: -webkit-gradient (เชิงเส้น, บนซ้าย, ล่างซ้าย, หยุดสี (1%, rgba (247, 247, 247, 1)), หยุดสี (100%, rgba (242, 242, 242, 1 )));
พื้นหลัง: -webkit-linear-gradient(บนสุด, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: -o-linear-gradient(บนสุด, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: -ms-linear-gradient(บนสุด, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
-webkit-border-รัศมี:5px;
-moz-border-รัศมี:5px;
รัศมีเส้นขอบ:5px;
-webkit-box-shadow:0px 1px 1px #FFF สิ่งที่ใส่เข้าไป, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF สิ่งที่ใส่เข้าไป, 0 0 0px 5px #EAEAEA;
กล่องเงา:0px 1px 1px #FFF สิ่งที่ใส่เข้าไป, 0 0 0px 5px #EAEAEA;
-webkit-transition:ทั้งหมด 0.2 วินาทีเชิงเส้น;
-moz-transition:ทั้งหมด 0.2 วินาทีเชิงเส้น;
-o-transition:ทั้งหมด 0.2 วินาทีเชิงเส้น;
การเปลี่ยนแปลง:ทั้งหมด 0.2 วินาทีเชิงเส้น;
}
อินพุต[type=submit]:โฮเวอร์ {
สี:#686868;
เส้นขอบสี: #CECECE;
พื้นหลัง: rgb(244, 244, 244);
พื้นหลัง: -moz-linear-gradient(บนสุด, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: -webkit-gradient (เชิงเส้น, บนซ้าย, ล่างซ้าย, หยุดสี (0%, rgba (244, 244, 244, 1)), หยุดสี (100%, rgba (242, 242, 242, 1 )));
พื้นหลัง: -webkit-linear-gradient(บนสุด, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: -o-linear-gradient(บนสุด, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: -ms-linear-gradient(บนสุด, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
-webkit-box-shadow:0px 1px 1px #FFF สิ่งที่ใส่เข้าไป, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF สิ่งที่ใส่เข้าไป, 0 0 0px 5px #E0E0E0;
กล่องเงา:0px 1px 1px #FFF สิ่งที่ใส่เข้าไป, 0 0 0px 5px #E0E0E0;
}
input[type=submit]:active, input[type=submit]:โฟกัส {
ตำแหน่ง:ญาติ;
ด้านบน:1px;
สี:#515151;
พื้นหลัง: rgb (234, 234, 234);
พื้นหลัง: -moz-linear-gradient(บนสุด, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: -webkit-gradient (เชิงเส้น, บนซ้าย, ล่างซ้าย, หยุดสี (0%, rgba (234, 234, 234, 1)), หยุดสี (100%, rgba (242, 242, 242, 1 )));
พื้นหลัง: -webkit-linear-gradient(บนสุด, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: -o-linear-gradient(บนสุด, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: -ms-linear-gradient(บนสุด, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
พื้นหลัง: การไล่ระดับสีเชิงเส้น (บนสุด, rgba (234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
-webkit-box-shadow:0px -1px 1px #FFF แทรก, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF แทรก, 0 0 0px 5px #E0E0E0;
กล่องเงา:0px -1px 1px #FFF สิ่งที่ใส่เข้าไป, 0 0 0px 5px #E0E0E0;
}