Design Textbox, Input elemt from Scratch

In this tutorial, we will learn how to create a text box design from scratch.

The basic syntax of the text box …

<input type="text" placeholder="Textbox" />

And the design will look/render different on different OS and Browsers.

In the example, we've displayed the default Text box in Chrome(left side) and Firefox(right side)

The design of the text box is not uniform. The rendering is dependent on the OS and Browser.

So we will design the text fields using the CSS step by step from scratch. 

The basic HTML structure of the input text field

 The basic HTML structure will include tag(input), attribute and it's value. 

Next, we will design the input elements step by step.

→ Basic CSS Class

.form-control {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
}

Output: 

Next, we will set the below CSS properties one by one

• Sizes(width+height, padding)
• Fonts
• Background
• Borders
• Shadows
• Pseudo-classes(:hover, :active, :focus)
• Image/Icon inside the text field
• Transition & Animations

→ Sizes (define the size of the text box)

Width is an essential property for text boxes. We can set height using height property or using padding.

width: 100%;
/* Or */
width: 50vw;
/* Or */
width: 400px;
/* Or */
width: 10rem;

• width: 100% will fit 100% of your screen relative to the parent component.
• width: 50vw fit the 50% of your view-port width.
• width: 400px is fixed 400px width.
• width: 10rem(or em) is working relative to the font size of the root(or parent) element.

Height:

height: 40px;
/* or */
height: 2rem;
/* or */
padding: 10px 0;
/* or */
padding: 1rem 0;

→ Fonts

The nice font will change the look and feel of the text box. 

Select font family

font-family: 'Open Sans', sans-seif; 
/* or select the theme font or system font */
font-family: var(--theme-font);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

Font size:

font-size: 1rem;
/* or */
font-size: 5vw;
/* or */
font-size: 15px;

→ Backgrounds

Set backgrounds

background: #ccc; 
/* or */
background: var(--bg);

Background options:

• plain background color background-color: red; (hex, rgb(a), hsl …)
• background gradient background-color: linear-gradient(color1, color2) …
  - Gradient options: linear-gradient, radial-gradient, elliptical gradients…
• Background Image/pattern background-image: url(…)

→ Borders

The border is an important part of the input text boxes.

Border styles

- Simple Gray border

- Solid Blue border

- Dashed border

- Dotted border

- Double border

- Groove border

- Outset border

- Border Bottom

- Border-left

- Border Image

Set border background image: Either using gradient CSS or background-image property.

Border Radius:

Reference: Fancy border raduis generator

→ Shadows

Next, add the pseudo classes to add transition or animate the text box.

Pseudo Classes

You can combine pseudo-classes with elements/class.

Syntax: 

.form-input:hover {
--- css properties ---
}

:hover

The hover class is activated when you hover over the input element. 

You can combine any of the effects, for example, give a shadow, opacity, change the border, animate the borders, etc…

:focus

The focus class is activated when you focus/click  the input element. 

→ Set the Image/Icon inside the Text Field

Using the background-image property we can set the Icon/Image inside the text fields. 

→ Transition and Animations: 

The transition/animation can be done either using CSS(Pseudo class) or using the Javascript. 

In the below example, we will increase the width of the input field on focus.

In the above example, the default width of the text box is 150px. Then we apply the transition/animation on focus. 
To make smooth animation between the state we've added a .5s transition time.

You can combine any of the above properties or custom classes to animate the text field. 
Thanks!

Also, checkout the snippet: Input Text Box Effects