http://callmenick.com/post/various-css-input-text-styles

The HTML

<section>
  <h2>Section Title</h2>
  <ul class="input-list style-1 clearfix">
    <li>
      <input type="text" placeholder=":input">
    </li>
    <li>
      <input type="text" placeholder=":focus" class="focus">
    </li>
  </ul>
</section>

<section>
  <h2>Section Title</h2>
  ...
</section>

The CSS

input[type="text"] {
  display: block;
  margin: 0;
  width: 100%;
  font-family: sans-serif;
  font-size: 18px;
  appearance: none;
  box-shadow: none;
  border-radius: none;
}
input[type="text"]:focus {
  outline: none;
}

Let’s take a look at some styles!

#1) The Glow

This is a pretty common style these days. The input has a thin border, and when it is focused, an outer glow fades in. We’ll use the box-shadow property to achieve the glow, and fade it in with a CSS3 transition. Here’s what the CSS looks like.

The CSS

.style-1 input[type="text"] {
  padding: 10px;
  border: solid 1px #dcdcdc;
  transition: box-shadow 0.3s, border 0.3s;
}
.style-1 input[type="text"]:focus,
.style-1 input[type="text"].focus {
  border: solid 1px #707070;
  box-shadow: 0 0 5px 1px #969696;
}

Pretty simple and easy, right? Moving on.

#2) The Thick Border

The “thick border” style is common on minimalist sites or flat design sites. It’s easy, and just a thick border. The border will transition to a darker colour when focused using CSS3 transitions.

The CSS

.style-2 input[type="text"] {
  padding: 10px;
  border: solid 5px #c9c9c9;
  transition: border 0.3s;
}
.style-2 input[type="text"]:focus,
.style-2 input[type="text"].focus {
  border: solid 5px #969696;
}

Super simple, and looking good. On we go!

#3) The Double Border

The “double border” style is also common in flat design, and is a bit of a step up from the simple thick border style. We’ll use the border property as before, but also create the inner thin-lined border by using the box-shadow property.

The CSS

.style-3 input[type="text"] {
  padding: 10px;
  border: solid 5px #c9c9c9;
  box-shadow: inset 0 0 0 1px #707070;
  transition: box-shadow 0.3s, border 0.3s;
}
.style-3 input[type="text"]:focus,
.style-3 input[type="text"].focus {
  border: solid 5px #969696;
}

Neat! Amazing what a little bit of CSS can do…we just used a box-shadow to achieve a solid border look. Moving on!

#4) The Underline

This one is more along the lines of what you might see in a real-life pen & paper form. Just a line. We reset all borders, apply only a bottom border, and transition the colour to a darker one on focus.

The CSS

.style-4 input[type="text"] {
  padding: 10px;
  border: none;
  border-bottom: solid 2px #c9c9c9;
  transition: border 0.3s;
}
.style-4 input[type="text"]:focus,
.style-4 input[type="text"].focus {
  border-bottom: solid 2px #969696;
}

Simple, and effective.

#5) The Inset

This style, the “inset”, gives the user the feeling that the input is set into the page. It’s a beautiful and effective style that once required imagery to achieve. Now, plain and simple CSS and CSS3 can give us the effect we want. A simple transition will lighten it up when the user focuses.

The CSS

.style-5 input[type="text"] {
  padding: 10px;
  border: solid 1px #fff;
  box-shadow: inset 1px 1px 2px 0 #707070;
  transition: box-shadow 0.3s;
}
.style-5 input[type="text"]:focus,
.style-5 input[type="text"].focus {
  box-shadow: inset 1px 1px 2px 0 #c9c9c9;
}

Beautiful and effective!

Wrap Up

As we’ve seen many times now, CSS and CSS3 open up a lot of options for us. Once we get creative and start thinking outside the box a bit, the possibilities really open up. I’ve only touched the surface here, so it’s up to you to use this knowledge and get creative. Thanks for reading, and feel free to view the demo, download the source, or leave feedback below.