聯繫表格 7 樣式，通過 CSS3 使其美麗

Contact form 7 是最流行的插件，易於用於所有 wordpress 網站。 所以每次我們都必須自定義css來讓它變得更好。 但是每次為每個項目創建樣式既耗時又煩人。

因此，這裡是使用 css3 的聯繫表格 7 的非常簡單且易於使用的樣式。

 /********** 聯繫表格 7 樣式 *************/
.wpcf7 輸入[type="text"],
.wpcf7 輸入[type="email"],
.wpcf7 文本區域 {
    大綱：無；
    顯示：塊；
    寬度：380 像素；
    填充：4px 8px；
    邊框：1px 虛線 #DBDBDB;
    顏色：#3F3F3F；
    font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
    字體大小：14px；
    /*邊框半徑*/
    -webkit-border-radius:2px;
    -moz-邊界半徑：2px；
    邊框半徑：2px；
    /*過渡*/
    -webkit-transition:background 0.2s linear, box-shadow 0.6s linear;
    -moz-transition：背景 0.2s 線性，box-shadow 0.6s 線性；
    -o-transition：背景0.2s線性，box-shadow 0.6s線性；
    過渡：背景0.2s線性，box-shadow 0.6s線性；
}
.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；
font-family: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-重複線性漸變（-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-radius：8px；
    -moz-邊界半徑：8px；
    邊框半徑：8px；
    -webkit-box-shadow: 0px 1px 6px #3F3F3F;
    -moz-box-shadow: 0px 1px 6px #3F3F3F;
    盒子陰影：0px 1px 6px #3F3F3F;
}

 div.wpcf7:{之後
    背景：#F9F9F9；
    邊距：10px；
    位置：絕對；
    內容 ：” ”;
    底部：0；
    左：0；
    右：0；
    頂部：0；
    z 指數：-1；
    邊框：1px #E5E5E5 實心；
    -webkit-border-radius:8px;
    -moz-邊界半徑：8px；
    邊框半徑：8px；
}

 輸入[類型=提交] {
    光標：指針；
    背景：無；
    邊框：無；
    字體家族：'愛麗絲'，襯線；
    顏色：#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-漸變（線性，左上，左下，顏色停止（1％，rgba（247、247、247、1）），顏色停止（100％，rgba（242、242、242、1） ）））；
    背景：-webkit-linear-gradient(top, rgba(247, 247, 247, 1) 1%, rgba(242, 242, 242, 1) 100%);
    背景：-o-線性梯度（頂部，rgba（247、247、247、1）1％，rgba（242、242、242、1）100％）；
    背景：-ms-線性梯度（頂部，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-radius：5px；
    -moz-邊界半徑：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:all 0.2s 線性；
    -moz-transition：所有 0.2s 線性；
    -o-transition：所有 0.2s 線性；
    過渡：都是0.2s線性；
}
輸入[類型=提交]：懸停{
    顏色：#686868;
    邊框顏色：#CECECE；
    背景：RGB（244、244、244）；
    背景：-moz-線性漸變（頂部，rgba（244、244、244、1）0％，rgba（242、242、242、1）100％）；
    背景：-webkit-漸變（線性，左上，左下，顏色停止（0％，rgba（244、244、244、1）），顏色停止（100％，rgba（242、242、242、1） ）））；
    背景：-webkit-linear-gradient(top, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    背景：-o-線性梯度（頂部，rgba（244、244、244、1）0％，rgba（242、242、242、1）100％）；
    背景：-ms-線性梯度（頂部，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;
}
輸入[type=submit]:active, input[type=submit]:focus {
    位置：相對；
    頂部：1px；
    顏色：#515151;
    背景：RGB（234、234、234）；
    背景：-moz-線性梯度（頂部，rgba（234、234、234、1）0％，rgba（242、242、242、1）100％）；
    背景：-webkit-漸變（線性，左上，左下，顏色停止（0％，rgba（234、234、234、1）），顏色停止（100％，rgba（242、242、242、1） ）））；
    背景：-webkit-linear-gradient(top, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    背景：-o-線性梯度（頂部，rgba（234、234、234、1）0％，rgba（242、242、242、1）100％）；
    背景：-ms-線性梯度（頂部，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;
}