Email field not styled like other form fields

We noticed this happening on a couple of customer sites as well. I think that a recent Contact Form 7 update changed the input type of the email box from input[type=”text”] to input[type=”email”] but some theme developers haven’t updated their style sheets with it.

You just have to add .wpcf7 input[type=”email”] to the styling for it to work as breeze76 has done.

It’s a good thing that this has changed because tablet and phone keyboards change to suit the input type. With type=”email” the ‘@’ is made easier to find on the keyboard.

Now, having typed this, I realise I must go and fix my own personal site…

This was happening on several sites. So I copied the original CSS for each theme for the “input” and “focus” for example:

input[type=text] {
	background: #eee;
	border: solid 1px #ccc;
	padding: 6px 10px;
	border-radius: 5px;
	-webkit-appearance: none;
}

input[type=text]:focus {
	outline: none;
	background: #fff;
}

Pasted it into a child theme CSS file (or the theme’s custom CSS field in the Admin area) and changed “text” to “email” eg:

input[type=email] {
	background: #eee;
	border: solid 1px #ccc;
	padding: 6px 10px;
	border-radius: 5px;
	-webkit-appearance: none;
	max-width: 240px;
}

input[type=email]:focus {
	outline: none;
	background: #fff;
}

I also found I had to add a max-width attribute.

Thanks to everyone who has helped with this – really appreciate pointing me in the right direction.