E-Mail Field Styling

  • Resolved ConsultancySmartLLP

    (@consultancysmartllp)


    11 years, 6 months ago

    Hello!

    Ok, so I’ve read through all the ‘e-mail styling’ fixes over the forum and the internet, and none of them seem to be addressing the issue I am having with the CSS.

    All the fields in my CF7 are styled according to the theme that I am using; however, the e-mail field remains unchanged despite my efforts to implement different CSS from posts read in both the forum and the Internet.

    I have now reverted all the CSS back to original code, made sure I’m running the latest version of CF7 and WordPress.

    The theme base code:

    form {
		margin-bottom: 20px; }
	fieldset {
		margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #777;
		margin: 0;
		width: 210px;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
	select {
		padding: 0; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus,
	textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 60px; }
	label,
	legend {
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select {
		width: 220px; }
	input[type="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444; }

    The theme skin code:

    input[type="text"],
input[type="password"],
input[type="email"],
textarea {
  margin: 0;
  margin-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  border-color: #f4f4f4;
  font-family: Helvetica, sans-serif;
  font-weight: 400;
  border-color: #dddddd;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-color: #b4b4b4;
  color: #8a8a8a;
}

    Any help would be greatly appreciated.

    Thanks in advance.

    https://www.ads-software.com/extend/plugins/contact-form-7/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter ConsultancySmartLLP

    (@consultancysmartllp)

    This has now been resolved. Simple fix to the custom CSS styling.

    I may have a similar issue. In my contact form all of the sudden the email field is no longer styled. all other fields are still styled correctly. I would appreciate if you could share what did the trick for you and where so I can look at this and maybe fix my issue as well. thanks!

    To change the style of your CF7 forms you would need to edit the CSS style sheets used by your WordPress theme.

    See Styling Contact Form for a general explanation of styling CF7 forms using CSS. If you are not familiar with CSS, this page also includes some links to where you can learn CSS.

    The most common and preferred method is to create a Child Theme and make any necessary additions to the CSS in the child themes style.css only, rather than directly in the themes styles.css. That way you don’t loose your changes when you update the theme.

    It’s also a good idea to use Firebug or Chrome Dev Tools to find and target individual css classes & ids within your CF7 forms so that your css changes don’t inadvertantly effect other elements on your website.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘E-Mail Field Styling’ is closed to new replies.