お問い合わせフォーム7スタイル、CSS3で美しくする
公開: 2017-08-21お問い合わせフォーム7は、すべてのワードプレスWebサイトで簡単に使用できる最も人気のあるプラグインです。 したがって、cssをカスタマイズして適切にする必要があるたびに。 しかし、プロジェクトごとに毎回スタイルを作成するのは時間がかかり、面倒です。
したがって、ここではcss3を使用したコンタクトフォーム7のスタイルを非常に簡単に使用できます。
/**********お問い合わせフォーム7スタイル*************/
.wpcf7 input [type = "text"]、
.wpcf7 input [type = "email"]、
.wpcf7 textarea {
アウトライン：なし;
表示ブロック;
幅：380px;
パディング：4px 8px;
border：1px破線#DBDBDB;
色：＃3F3F3F;
font-family：'Droid Sans'、Tahoma、Arial、Verdana sans-serif;
font-size：14px;
/*境界半径*/
-webkit-border-radius：2px;
-moz-border-radius：2px;
border-radius：2px;
/*遷移*/
-webkit-transition：background 0.2s線形、box-shadow0.6s線形;
-moz-transition：background 0.2s線形、box-shadow0.6s線形;
-o-transition：background 0.2s線形、box-shadow0.6s線形;
遷移：背景0.2秒線形、ボックスシャドウ0.6秒線形。
}
.wpcf7 input [type = "submit"]、
.wpcf7 input [type = "button"] {
背景色：＃725f4c;
幅：100％;
text-align：center;
text-transform：uppercase;
}
div＃wpcf7-f201-p203-o1 {
背景色：#fbefde;
ボーダー：1pxソリッド＃f28f27;
パディング：20px;
}
＃wpcf7-f201-p203-o1 input [type = "text"]、
＃wpcf7-f201-p203-o1 input [type = "email"]、
＃wpcf7-f201-p203-o1 textarea {
背景：＃725f4c;
色：#FFF;
font-family：lora、 "Open Sans"、sans-serif;
font-style：italic;
}
＃wpcf7-f201-p203-o1 input [type = "submit"]、
＃wpcf7-f201-p203-o1 input [type = "button"] {
背景色：＃725f4c;
幅：100％;
text-align：center;
text-transform：uppercase;
}
div.wpcf7 {
位置：相対;
幅：440px;
z-index：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）;
背景：repating-linear-gradient（-45deg、＃EFC1CB、＃EFC1CB 30px、＃F2F2F2 30px、＃F2F2F2 40px、＃C2E8F5 40px、＃C2E8F5 70px、＃F2F2F2 70px、＃F2F2F2 80px）;
-webkit-border-radius：8px;
-moz-border-radius：8px;
border-radius：8px;
-webkit-box-shadow：0px 1px 6px＃3F3F3F;
-moz-box-shadow：0px 1px 6px＃3F3F3F;
ボックスシャドウ：0px 1px 6px＃3F3F3F;
}
div.wpcf7：after {
背景：＃F9F9F9;
マージン：10px;
位置：絶対;
コンテンツ ：" ";
下：0;
左：0;
右：0;
上：0;
z-index：-1;
border：1px＃E5E5E5 solid;
-webkit-border-radius：8px;
-moz-border-radius：8px;
border-radius：8px;
}
input [type = submit] {
カーソル：ポインタ;
背景：なし;
border：none;
フォントファミリー：'アリス'、セリフ;
色：＃767676;
font-size：18px;
パディング：10px 4px;
border：1px solid＃E0E0E0;
text-shadow：0px 1px 1px＃E8E8E8;
背景：rgb（247、247、247）;
背景：-moz-linear-gradient（top、rgba（247、247、247、1）1％、rgba（242、242、242、1）100％）;
背景：-webkit-gradient（linear、左上、左下、color-stop（1％、rgba（247、247、247、1））、color-stop（100％、rgba（242、242、242、1） ）））;
背景：-webkit-linear-gradient（top、rgba（247、247、247、1）1％、rgba（242、242、242、1）100％）;
背景：-o-linear-gradient（top、rgba（247、247、247、1）1％、rgba（242、242、242、1）100％）;
背景：-ms-linear-gradient（top、rgba（247、247、247、1）1％、rgba（242、242、242、1）100％）;
背景：linear-gradient（top、rgba（247、247、247、1）1％、rgba（242、242、242、1）100％）;
-webkit-border-radius：5px;
-moz-border-radius：5px;
border-radius：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;
box-shadow：0px 1px 1px #FFFインセット、0 0 0px 5px #EAEAEA;
-webkit-transition：すべて0.2秒線形;
-moz-transition：すべて0.2秒線形;
-o-transition：すべて0.2秒線形。
遷移：すべて0.2秒線形;
}
input [type = submit]：hover {
色：＃686868;
ボーダーカラー：#CECECE;
背景：rgb（244、244、244）;
背景：-moz-linear-gradient（top、rgba（244、244、244、1）0％、rgba（242、242、242、1）100％）;
背景：-webkit-gradient（linear、左上、左下、color-stop（0％、rgba（244、244、244、1））、color-stop（100％、rgba（242、242、242、1） ）））;
背景：-webkit-linear-gradient（top、rgba（244、244、244、1）0％、rgba（242、242、242、1）100％）;
背景：-o-linear-gradient（top、rgba（244、244、244、1）0％、rgba（242、242、242、1）100％）;
背景：-ms-linear-gradient（top、rgba（244、244、244、1）0％、rgba（242、242、242、1）100％）;
背景：linear-gradient（top、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;
box-shadow：0px 1px 1px #FFFインセット、0 0 0px 5px＃E0E0E0;
}
input [type = submit]：active、input [type = submit]：focus {
位置：相対;
top：1px;
色：＃515151;
背景：rgb（234、234、234）;
背景：-moz-linear-gradient（top、rgba（234、234、234、1）0％、rgba（242、242、242、1）100％）;
背景：-webkit-gradient（linear、左上、左下、color-stop（0％、rgba（234、234、234、1））、color-stop（100％、rgba（242、242、242、1） ）））;
背景：-webkit-linear-gradient（top、rgba（234、234、234、1）0％、rgba（242、242、242、1）100％）;
背景：-o-linear-gradient（top、rgba（234、234、234、1）0％、rgba（242、242、242、1）100％）;
背景：-ms-linear-gradient（top、rgba（234、234、234、1）0％、rgba（242、242、242、1）100％）;
背景：linear-gradient（top、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;
box-shadow：0px -1px 1px #FFFインセット、0 0 0px 5px＃E0E0E0;
}