CSS for form input fields and text fields

Change and redesign input fields in forms using CSS.

Today a reader told me that the input fields in my contact form are barely legible because the writing is not. I took a quick look at it and could only agree with her: The font size was well below that of the body text in my blog. To adapt this, you can insert a custom CSS in the theme settings, which you can use to visually change the input fields and text fields in the form.

Change and redesign input fields in forms using CSS.
Change and redesign input fields in forms using CSS.

CSS class for forms as a starting point

The best way to change a form is to give it a class, which you then define in the CSS. In the HTML source code of the form tag it looks like this:

In the CSS itself you can then make the definition with changes to the font size and other attributes:

.wpcf7-form input [type = "text"], .wpcf7-form input [type = "email"], .wpcf7-form textarea {font-size: 120%; color: # 333333;}

In this example, the name “wpcf7-form” is the class that the plugin specifies for the contact form. You can of course name them whatever you want.

You can also be creative with the attributes. For example, you can use images as backgrounds for text area elements or play with the font colors and fonts. To list all possibilities here would go beyond the scope.

Select and Option elements

I didn't need these two groups for my minimalist form, but if you also want to redesign option fields and select boxes, you can do this with the following CSS entries:

.wpcf7-form optgroup {font-size: 15pt; color: # ff0000;} .wpcf7-form select {width: 250px; font-size: 1.2em;}

I hope I was able to help you with your CSS tinkering with HTML forms with this little guide. If you have any additions or questions, please add them as a comment.


Did you like the article and did the instructions on the blog help you? Then I would be happy if you the blog via a Steady Membership would support.

1 comment on “CSS for form input fields and text fields”

  1. Thanks for the detailed instructions. You have helped me a lot with that. Had the problem too and didn't get a clear answer online.

Post a comment

Your e-mail address will not be published. Required fields are marked with * marked

In the Sir Apfelot Blog you will find advice, instructions and reviews on Apple products such as the iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini and Mac Studio.