Input Text [Everything You Should Know]
Tags: html, css, ux, ui
Published: 2018-05-11 09:32:45

---
title: Input Text [Everything You Should Know]
published: true
description: All the CSS tricks and best practices for this everyday HTML element. 
tags: HTML, CSS, UX, UI.
---
Inputs are sooo important in the user experience design and it's crucial that their style is perfectly transferred from the design to the page. It's no secret that for a presentation on a web page you need CSS but the tricky part is how to make it as good as possible.

**Inputs have more variations, states and things about them than any other element in HTML** so, let's cover everything a one should know about the post input type text. Let's bust the input!

## Input  &#91;type="text"]

Input text presents an empty square where the text is expected. It is a pretty common element and, in most cases, presents a white element surrounded by a color border. 
*It is a good practice to add a placeholder text inside of it and to have a label outside of it.*

![Screen-Shot-on-May-4th-at-04_34-PM](https://kolosek.com/content/images/2018/05/Screen-Shot-on-May-4th-at-04_34-PM.png)
*Default input text*

![Screen-Shot-on-May-7th-at-10_24-AM](https://kolosek.com/content/images/2018/05/Screen-Shot-on-May-7th-at-10_24-AM.png)
*Default input text in focus state*

![Screen-Shot-on-May-7th-at-09_50-AM](https://kolosek.com/content/images/2018/05/Screen-Shot-on-May-7th-at-09_50-AM.png)
*Default placeholder text*

![Screen-Shot-on-May-8th-at-10_57-AM](https://kolosek.com/content/images/2018/05/Screen-Shot-on-May-8th-at-10_57-AM.png)
*Default autofill state*

To add the desired style to the input there are a few standard options and a few special ones. **If there is a label for the input, it is added in the `label` element next to the input, and its `for` attribute has the same value as the `id` attribute of the linked input element.** The label element can be styled like the standard HTML text element. 

For input, it is standard to change dimensions, `border`, `background-color`, `border-radius` and `font` options. It is not standard to style a placeholder text, a focus, an autofill and a validation state. These non-standard options will be explained in the next article and after that, some examples of different options used will be presented.

## A Placeholder Text

For **styling a placeholder text set** with placeholder attribute, `::placeholder` pseudo-element is used. All text styling is supported (font, color, background, opacity, word-spacing, text-transform, [line-height](https://kolosek.com/css-line-height/)...). In Firefox browser all placeholders have an opacity value applied so to [reset](https://kolosek.com/css-reset/) that value it is necessary to define opacity.

     ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
         ...
     }
     ::-moz-placeholder { /* Firefox 19+ */
         opacity:1;
         ...
     }
     :-ms-input-placeholder { /* IE 10+ */
         ...
     }
     :-moz-placeholder { /* Firefox 18- */
         ...
     }


Example:

     ::placeholder{
        color: coral;
        font-size: 14px;
        font-family: sans-serif;
        letter-spacing: .2px;
        padding-left: 5px;
     }



### The Result:

![Screen-Shot-on-May-7th-at-10_58-AM](https://kolosek.com/content/images/2018/05/Screen-Shot-on-May-7th-at-10_58-AM.png)

## Focus State
The focus state is important for user experience and it exists on every input element. *It is used for indication of the currently targeted element. This state is presented with a blue border around an element and in CSS it is selected with pseudo class `:focus`.*

The blue border around the focused element is added with the default line `outline: auto 5px -webkit-focus-ring-color` and that default color value is defined in a browser theme. In some cases, this presentation annoy designers of the element and some people choose to disable it by next code:

     :focus{
         outline:none;
     }

**This is a [very bad practice](https://24ways.org/2009/dont-lose-your-focus/) and it should be avoided. Instead of neutralizing style for the focus state, you can style it in your own way and it doesn't need to include an outline.**

Example:

     :focus{
         outline:none;
         border:1px solid coral;
         box-shadow:0 0 5px coral;
     }

### The Result:
![Screen-Shot-on-May-7th-at-03_39-PM](https://kolosek.com/content/images/2018/05/Screen-Shot-on-May-7th-at-03_39-PM.png)

*It is a nice touch to add a [transition](https://kolosek.com/css-transition/) in this case (and any other!).*

## Autocomplete State

Webkit browsers provide a setting that allows users to automatically fill in details for common form fields. You have seen this when completing a form that asks for things like name, address, and email. **Autocomplete fields** have default yellow background and that is something that can interfere with design, and also that is something that can easily be changed (in this mode you can also change text color).

     :-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px mintcream inset !important;
     }
    
     :-webkit-autofill {
        -webkit-text-fill-color: coral !important;
     }

### The Result:

![Screen-Shot-on-May-7th-at-11_45-AM](https://kolosek.com/content/images/2018/05/Screen-Shot-on-May-7th-at-11_45-AM.png)

## Validation States

There are two relatively new pseudo-classes `:valid` and `:invalid`. These pseudo-classes are useful for highlighting success and fail for the user. It is common to see **green** when content is valid and **red** if it's not, so now you can easily define that with CSS. Old versions of browsers do not support it, keep that in mind.

     :valid {
        box-shadow: -5px 0 lime;
        border-left: none;     
     }
    
     :invalid {
        box-shadow: -5px 0 orangered;
        border-left: none;     
     }
     
*`box-shadow` option is used instead of the `border-left` because there is a visual problem in the case when borders of one element have different style or color*


### The Result:

![validation-examples--1-](https://kolosek.com/content/images/2018/05/validation-examples--1-.png)


## Extra Tip 

One more problem with input fields is one on the iOS which appears because default styling is added. There are some extra rounded corners and dropshadows. The best way I found to fix this is one from [daretothink blog](https://www.daretothink.co.uk/stop-ios-styling-your-input-fields-and-buttons/):

    
    -webkit-appearance: none;
    border-radius: 0;


## Good Examples
![input text example](https://cdn.dribbble.com/users/3375/screenshots/1684401/newsletter-animation-final.gif)
![input text example](https://kolosek.com/content/images/2018/05/derna-form-orange.gif)
![input text example](https://kolosek.com/content/images/2018/05/payment-1.gif)
![input text example](https://kolosek.com/content/images/2018/05/fb_d_signup.png)
![input text example](https://cdn.dribbble.com/users/941294/screenshots/4537544/sign_up_2.png)
![gif input text example](https://cdn.dribbble.com/users/1172503/screenshots/4505740/login-form.gif)
![input text example](https://cdn.dribbble.com/users/1706197/screenshots/4475408/daily_ui_2.jpg)


## Closing Word

Work on input field design is something that you can always do and something that your user will surely appreciate. Once again I urge you to use transition in styling.

This article is originally published on [Kolosek Blog](https://kolosek.com/input-text/?utm_source=dvt).