Forked from maykbrito/contact-form-7-format-to-style-divi-theme.css
Created
September 24, 2024 08:36
-
-
Save MisterWP/98a77ad4cfb6350e355282fcbc451206 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