Created
November 7, 2017 12:00
-
-
Save maykbrito/6e671e2dad81990b983e0cd47fb28137 to your computer and use it in GitHub Desktop.
Style a contact form 7 to seems like Divi Theme Contact style
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*contact form 7 like Divi theme */ | |
/* fields. Note "assunto" field, is explained in Select section of this file */ | |
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .assunto{ | |
background-color: #eee !important; | |
border: none !important; | |
width: 100% !important; | |
-moz-border-radius: 0 !important; | |
-webkit-border-radius: 0 !important; | |
border-radius: 0 !important; | |
font-size: 14px; | |
color: #999 !important; | |
padding: 16px !important; | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
/* submit button */ | |
.wpcf7-submit { | |
margin: 8px auto 0; | |
cursor: pointer; | |
font-size: 20px; | |
font-weight: 500; | |
-moz-border-radius: 3px; | |
-webkit-border-radius: 3px; | |
border-radius: 3px; | |
padding: 6px 20px; | |
line-height: 1.7em; | |
background: transparent; | |
border: 2px solid; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
-moz-transition: all 0.2s; | |
-webkit-transition: all 0.2s; | |
transition: all 0.2s; | |
} | |
.wpcf7-submit:hover { | |
background-color: #eee; | |
border-color:#eee; | |
padding: 6px 20px !important; | |
} | |
/*bold label*/ | |
.wpcf7-form label {font-weight:bold} | |
/* select: put a class, and call by class. In this example, my field class is: "assunto" */ | |
.assunto {display:block} | |
.assunto .wpcf7-select { | |
border:none; background:transparent; width:100%; font-size: 14px; | |
color: #999 !important; | |
} | |
/* end select */ | |
/* radio button: put a class, and reference that class. Ex.: my radio button field class is: "radio-class"' | |
.radio-class .wpcf7-radio {display:table;} | |
span.wpcf7-list-item { display: table-row; } | |
span.wpcf7-list-item * { display: table-cell; padding-right:30px;} | |
/* end radio button */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment