Various CSS Input Text Styles

In this tutorial, we look at various CSS input text styles that are great for giving forms on your site a more welcoming and appealing look. Gone are the days of image shadows...we're doing it with straight up CSS.

Haruki

First Name

Hoshi

Name

Kuro

Username

Jiro

Cat's Name

Minoru

First Name

Yoko

Street

Hideo

Username

Kyo

What's your email?

Akira

First Name

Ichiro

Bird's Color

Juro

First Name

Madoka

Frequency

Kaede

First Name

Isao

First Name

---

Adding Beauty To Your Forms

Website forms have long had a history of being boring, bland, and unappealing. In the past few years though, CSS and CSS3 have opened up some possibilities for us. I previously looked at making stylish buttons with pure CSS, and a lot of times, buttons follow input fields. Let’s take a look at some ways that we could prettify our forms, by implementing the following various CSS input text styles. Some of these are already popular around the web, and add an attractive and welcoming interface. Let’s get started!

---

Common Markup & CSS

All our styles will take on a common set HTML markup and CSS. I’ll also be automatically displaying the :focus style by adding a .focus class. Each style is wrapped in a list element with a simple media query to make it respond to all screen sizes. I also reset all my input styles so that they are consistent across devices. Also, the CSS you read here isn’t prefixed, but the downloadable source is. If you’re copying straight from here, make sure you prefix properly! Let’s take a look.

Click here to Download Code Download