Стиль контактной формы 7, Make it Beautiful by CSS3
Опубликовано: 2017-08-21Contact form 7 — самый популярный плагин, который легко использовать для всех веб-сайтов WordPress. Поэтому каждый раз нам приходится настраивать css, чтобы сделать его красивым. Но создание стиля каждый раз для каждого проекта отнимает много времени и раздражает.
Итак, вот очень простой и готовый к использованию стиль для контактной формы 7 с использованием css3.
/************ Форма обратной связи 7 Стиль *************/
.wpcf7 ввод[тип="текст"],
.wpcf7 ввод [тип = "электронная почта"],
.wpcf7 текстовое поле {
контур: нет;
дисплей:блок;
ширина: 380 пикселей;
отступ: 4px 8px;
граница: пунктир 1px #DBDBDB;
цвет:#3F3F3F;
семейство шрифтов: «Droid Sans», Tahoma, Arial, Verdana без засечек;
размер шрифта: 14px;
/*граница-радиус*/
-webkit-граница-радиус: 2px;
-moz-граница-радиус: 2px;
радиус границы: 2px;
/*переход*/
-webkit-transition: фон 0,2 с, линейный, box-shadow 0,6 с, линейный;
-moz-transition: фон 0,2 с, линейный, box-shadow 0,6 с, линейный;
-o-transition: фон 0,2 с, линейный, box-shadow 0,6 с, линейный;
переход: фон 0,2 с, линейный, блок-тень 0,6 с, линейный;
}
.wpcf7 ввод [тип = "отправить"],
.wpcf7 ввод [тип = "кнопка"] {
цвет фона:#725f4c;
ширина:100%;
выравнивание текста: по центру;
преобразование текста: верхний регистр;
}
div # wpcf7-f201-p203-o1 {
цвет фона: #fbefde;
граница: 1px сплошная #f28f27;
отступ: 20 пикселей;
}
#wpcf7-f201-p203-o1 ввод[тип="текст"],
#wpcf7-f201-p203-o1 input[type="email"],
# wpcf7-f201-p203-o1 текстовая область {
фон:#725f4c;
цвет:#FFF;
семейство шрифтов: lora, "Open Sans", без засечек;
стиль шрифта: курсив;
}
#wpcf7-f201-p203-o1 ввод[тип="отправить"],
#wpcf7-f201-p203-o1 input[type="button"] {
цвет фона:#725f4c;
ширина:100%;
выравнивание текста: по центру;
преобразование текста: верхний регистр;
}
div.wpcf7 {
положение: родственник;
ширина: 440 пикселей;
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);
background: -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-radius: 8px;
-moz-border-radius: 8px;
радиус границы: 8px;
-webkit-box-shadow: 0px 1px 6px #3F3F3F;
-moz-box-shadow: 0px 1px 6px #3F3F3F;
тень блока: 0px 1px 6px #3F3F3F;
}
div.wpcf7: после {
фон:#F9F9F9;
поле: 10 пикселей;
положение: абсолютное;
содержание :" ";
внизу: 0;
слева: 0;
справа: 0;
сверху: 0;
z-индекс: -1;
граница: 1px #E5E5E5 сплошная;
-webkit-border-radius:8px;
-moz-граница-радиус: 8px;
радиус границы: 8px;
}
ввод [тип = отправить] {
курсор:указатель;
фон:нет;
граница: нет;
семейство шрифтов: «Алиса», с засечками;
цвет:#767676;
размер шрифта: 18px;
отступ: 10 пикселей 4 пикселя;
граница: 1px сплошная #E0E0E0;
тень текста: 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-градиент (линейный, левый верхний, левый нижний, цветной стоп (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-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%);
фон: линейный градиент (сверху, rgba (247, 247, 247, 1) 1%, rgba (242, 242, 242, 1) 100%);
-webkit-граница-радиус: 5px;
-moz-граница-радиус: 5px;
радиус границы: 5px;
-webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #EAEAEA;
-webkit-transition:все линейные 0.2s;
-moz-transition:все 0.2с линейные;
-o-переход: все 0,2с линейные;
переход: все линейные 0,2 с;
}
ввод [тип = отправить]: наведите {
цвет:#686868;
цвет границы: #CECECE;
фон: RGB(244, 244, 244);
фон: -moz-linear-gradient(top, 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-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%);
фон: линейный градиент (сверху, rgba (244, 244, 244, 1) 0%, rgba (242, 242, 242, 1) 100%);
-webkit-box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF вставка, 0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}
input[type=submit]:active, input[type=submit]:focus {
должность: родственница;
верх: 1 пиксель;
цвет:#515151;
фон: RGB(234, 234, 234);
фон: -moz-linear-gradient(top, 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-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%);
фон: линейный градиент (сверху, rgba (234, 234, 234, 1) 0%, rgba (242, 242, 242, 1) 100%);
-webkit-box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF вставка, 0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF inset, 0 0 0px 5px #E0E0E0;
}