양식 7 스타일에 문의, CSS3로 아름답게 만드십시오

문의 양식 7은 모든 워드프레스 웹사이트에서 사용하기 쉬운 가장 인기 있는 플러그인입니다. 그래서 매번 우리는 CSS를 멋지게 만들기 위해 커스터마이징해야 합니다. 하지만 매번 프로젝트마다 스타일을 만드는 것은 시간이 많이 걸리고 귀찮은 일입니다.

그래서 여기에 css3을 사용하는 문의 양식 7에 대해 매우 쉽고 사용하기 쉬운 스타일이 있습니다.

 /********** 문의 양식 7 스타일 *************/
.wpcf7 입력[유형="텍스트"],
.wpcf7 입력[유형="이메일"],
.wpcf7 텍스트 영역 {
    개요:없음;
    디스플레이:블록;
    너비: 380픽셀;
    패딩:4px 8px;
    테두리:1px 대시 #DBDBDB;
    색상:#3F3F3F;
    font-family:'Droid Sans', Tahoma, Arial, Verdana sans-serif;
    글꼴 크기:14px;
    /*경계 반경*/
    -웹킷-테두리-반경:2px;
    -moz-border-radius:2px;
    테두리 반경: 2px;
    /*이행*/
    -webkit-transition: 배경 0.2초 선형, 상자 그림자 0.6초 선형;
    -moz-transition: 배경 0.2초 선형, 상자 그림자 0.6초 선형;
    -o-전환: 배경 0.2초 선형, 상자 그림자 0.6초 선형;
    전환: 배경 0.2초 선형, 상자 그림자 0.6초 선형;
}
.wpcf7 입력[유형="제출"],
.wpcf7 입력[유형="버튼"] { 
배경색:#725f4c;
너비: 100%;
텍스트 정렬:가운데;
텍스트 변환:대문자;
}

div#wpcf7-f201-p203-o1{ 
배경색: #fbefde;
테두리: 1px 솔리드 #f28f27;
패딩:20px;
}
#wpcf7-f201-p203-o1 입력[유형="텍스트"],
#wpcf7-f201-p203-o1 입력[유형="이메일"],
#wpcf7-f201-p203-o1 텍스트 영역 {
배경: #725f4c;
색상:#FFF;
font-family:lora, "Open Sans", sans-serif; 
글꼴 스타일: 기울임꼴;    
}
#wpcf7-f201-p203-o1 입력[유형="제출"],
#wpcf7-f201-p203-o1 입력[유형="버튼"] { 
배경색:#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);
    배경: -webkit-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px);
    배경: -o-repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F8 20F8 70px)
    배경: 반복 선형 그라데이션(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #80F2F);
    -웹킷 테두리 반경: 8px;
    -moz-border-radius: 8px;
    테두리 반경: 8px;
    -웹킷 상자 그림자: 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 솔리드;
    -웹킷-테두리-반경:8px;
    -moz-border-radius:8px;
    테두리 반경: 8px;
}

 입력[유형=제출] {
    커서:포인터;
    배경:없음;
    테두리:없음;
    font-family:'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(linear, left top, left bottom, color-stop(1%, rgba(247, 247, 247, 1)), color-stop(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-테두리-반지름:5px;
    -moz-border-radius: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;
    box-shadow:0px 1px 1px #FFF 삽입, 0 0 0px 5px #EAEAEA;
    -webkit-transition: 모든 0.2초 선형;
    -moz-transition: 모든 0.2초 선형;
    -o-전환: 모든 0.2초 선형;
    전환: 모두 0.2초 선형;
}
입력[유형=제출]:호버 {
    색상: #686868;
    테두리 색상: #CECECE;
    배경: rgb(244, 244, 244);
    배경: -moz-linear-gradient(상단, rgba(244, 244, 244, 1) 0%, rgba(242, 242, 242, 1) 100%);
    배경: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(244, 244, 244, 1)), color-stop(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;
}
입력[유형=제출]:활성, 입력[유형=제출]:초점 {
    위치:상대적;
    상단:1px;
    색상: #515151;
    배경: rgb(234, 234, 234);
    배경: -moz-linear-gradient(상단, rgba(234, 234, 234, 1) 0%, rgba(242, 242, 242, 1) 100%);
    배경: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(234, 234, 234, 1)), color-stop(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;
}