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.

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. 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.

The HTML

Markup


<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>

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.

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.

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.

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.

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.

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!

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.
Location: Bengaluru, Karnataka, India

Comments

Post a Comment

Popular posts from this blog

Gradient Border Colors with CSS

Image
CSS3 has all the new features. With these features, we are now able to build image-less websites. Earlier,  We were using image when it comes to showing gradient colors. Now, it becomes much leaner with the use of CSS3 Gradient Background. But CSS3 Gradient does not stop only for background use. Did you know that you can also utilize it within borders? Let's see how to do this. First Method The first method is by applying CSS3 Gradient within pseudo-elements. Well, let’s see how the trick works. Top To Bottom Gradient Border We will start off with a simple gradient that spreads from top to bottom. To get started, create a box with a div, as follows. HTML <div class="box"></div> CSS .box {       width: 400px;       height: 400px;       background: #eee;   } To form the gradient in the box borders, set a solid border on the top and bottom side of the box first. And also create 2 rectangles with 2 pseudo-elements — :before and :a
Read more

10 Useful Libraries and Resources for Responsive Web Design

Image
Let’s talk about responsive web design. People are increasingly dependent on their smart mobile devices, and chances are that a large portion of the visitors of your website have used their phone or tablet to get to it. In this article you will find 10 articles, tools and resources, which will help you learn what responsiveness is, and how to apply these techniques to your current website. Happy learning! Basics Let’s start with these articles which explain the basic ideas of responsiveness. 1. Make it Responsive Google’s “Make it Responsive” is a great introduction in the topic. It will get you into the responsive web-designs. During this course, you will be building a site that works across multiple screen sizes and device types. They also have other useful guides which we recommend.                                                     Make it Responsive 2. MDN’s Responsive Web design Tutorial This is a nice MDN article about some of the basic strategies people use t
Read more

The Simplest Way To Center Elements Vertically And Horizontally

Flexbox is a relatively new addition to the CSS world and we keep finding more and more excellent applications for it. We can even solve the age-old problem with centering an element both vertically and horizontally with CSS. It is easier than you can imagine – it is only three lines of code, doesn’t require you to specify the size of the centered element and is responsive-friendly! This technique works in all modern browsers – IE10+, Chrome, Firefox and Safari (with the -webkit- prefix). See the full compatibility table here . The HTML The idea, of course, revolves around flexbox. First, we create a container in which we want everything to be centered: <div class="container"> <h3> All content in here will be centered. </h3> </div> You can place this container div anywhere you want. In the live example above we’ve made it take up the whole width and height of the page. The CSS As we said earlier, we will be u
Read more