Skip to content
  • Quizes
  • QStack
  • Blog
  • pinterest
  • instagram
  • twitter
  • linkedin
  • facebook
W3 Coding Schools
  • Home
  • HTML
    • HTML Introduction
    • HTML Editors
    • Fundamentals of HTML
    • Elements of HTML
    • HTML Attributes
    • HTML Headings
    • HTML Paragraphs
    • HTML Style Attribute
    • HTML Text Formatting
    • HTML Phrase Tags
    • HTML Comments
    • HTML with CSS
    • HTML Links
    • HTML Images
    • HTML Tables
    • HTML Lists
    • HTML Blocks
    • HTML Class Attribute
    • HTML Id Attribute
    • HTML Iframes
    • HTML JavaScript
    • HTML File Paths
    • HTML Head
    • Computer Code Elements
    • HTML Entities
    • HTML Charset
    • HTML URL Encode
    • HTML and XHTML
    • HTML Layouts
    • HTML Forms
    • HTML Form Elements
    • HTML Form Input Types
    • HTML Input Attributes
    • HTML5 Introduction
    • HTML5 New Elements
    • Semantic Elements
    • HTML5 Migration
    • Style Guide
    • HTML Canvas
  • CSS
    • CSS Introduction
    • CSS Syntax and CSS Comments
    • CSS Selectors
    • How to add CSS to a Webpage
    • CSS Color Basics
    • CSS Background Properties
    • CSS Border Properties
    • CSS Margin and Padding Properties
    • CSS Height and Width properties
    • CSS Box Model
    • CSS Outline Properties
    • CSS Fonts
    • CSS Text
    • How To Add Icons
    • CSS Links
    • CSS List-Style
    • CSS Tables
    • CSS Display Property
    • CSS Position Property
    • CSS Overflow Property
    • CSS max-width Property
    • CSS Float and Clear Properties
    • CSS Alignment
    • CSS inline-block
    • CSS Combinators
    • CSS Pseudo Classes
    • CSS Pseudo Elements
    • CSS Opacity
    • CSS Navigation Bar
    • CSS Dropdowns
    • CSS Image Gallery
    • CSS Image Sprites
    • CSS Attribute Selector
    • CSS Styling Forms
    • CSS Counters
    • CSS Units
    • CSS Specificity
    • CSS Website Layout
    • CSS Rounded Corners
    • CSS Border Image Property
    • CSS Multiple Backgrounds
    • CSS Gradient
    • CSS Shadow Effects
    • CSS Text Effects
    • CSS Web Fonts
    • CSS 2D Transforms
  • Bootstrap 4
    • Bootstrap 4 – Introduction
    • Bootstrap versions
    • Bootstrap 4 Layout
    • Bootstrap 3 Vs Bootstrap 4
    • Bootstrap 4 Grid System
    • Bootstrap 4 Typography
    • Bootstrap 4 Colors
    • Bootstrap 4 Images
    • Bootstrap 4 Tables
    • Bootstrap 4 Jumbotron
    • Bootstrap 4 Figures
    • Bootstrap 4 Alerts
    • Bootstrap 4 Buttons
    • Bootstrap 4 Button Group
    • Bootstrap 4 Badges
    • Bootstrap 4 Spinners
    • Bootstrap 4 Progress Bars
    • Bootstrap 4 Pagination
    • Bootstrap 4 Breadcrumbs
    • Bootstrap 4 List Groups
    • Bootstrap 4 Cards
  • jQuery
    • jQuery Introduction
    • jQuery Download
    • jQuery Selectors
    • jQuery Event Methods
    • jQuery Hide/Show Effects
    • jQuery Fading Effects
    • jQuery Sliding Effects
    • jQuery Animation
    • jQuery Stop and Callback
    • jQuery Get and Set Methods
    • jQuery Chaining
    • jQuery Add
    • jQuery Remove
    • jQuery CSS Classes
    • jQuery Style Properties
    • jQuery Dimensions
    • jQuery Traversing
    • jQuery Ancestors
    • jQuery Descendants
    • jQuery Siblings
  • Javascript
    • JS Introduction
    • JS Where to Put
    • JavaScript Syntax
    • JavaScript Comments
    • JavaScript Variables
    • JavaScript Data Types
    • JavaScript Operators
    • JavaScript Events
    • JavaScript Strings
    • JavaScript Numbers
  • php
    • PHP Introduction
    • Install PHP
    • PHP Syntax and Comments
    • PHP Variables
    • PHP Constants
    • PHP Echo and Print
    • PHP Data Types
    • PHP Strings
    • PHP Operators
    • PHP $ and $$ Variables
  • WordPress
    • WordPress Introduction
    • WordPress History
    • WordPress.com vs WordPress.org
    • How to Install WordPress
    • WordPress Dashboard
    • How to Create a WordPress Website
    • WordPress Posts
    • WordPress Pages
    • WordPress Posts vs Pages
    • WordPress Categories
  • SEO
    • SEO Introduction
    • SEO Tactics and Methods
    • SEO Relevant Filenames
    • SEO Domain Name
    • Website Design and SEO
    • SEO Keywords
    • Meta Tags Optimization
    • Title Tag Optimization
    • Anchor Text Optimization
    • Content Optimization
  • Android
    • Android Introduction
    • Android History and Versions
    • Android Architecture
    • Android Environment Setup
    • Android Application Components
    • Hello World Application
    • Android Activities
  • iOS
    • iOS Introduction
    • iOS Environment Setup
    • iOS Architecture

You Are Here

  • Home
  • Learn CSS
  • CSS Styling Forms

Topics

  • CSS Introduction
  • CSS Syntax and CSS Comments
  • CSS Selectors
  • How to add CSS to a Webpage
  • CSS Color Basics
  • CSS Background Properties
  • CSS Border Properties
  • CSS Margin and Padding Properties
  • CSS Height and Width properties
  • CSS Box Model
  • CSS Outline Properties
  • CSS Fonts
  • CSS Text
  • How To Add Icons
  • CSS Links
  • CSS List-Style
  • CSS Tables
  • CSS Display Property
  • CSS Position Property
  • CSS Overflow Property
  • CSS max-width Property
  • CSS Float and Clear Properties
  • CSS Alignment
  • CSS inline-block
  • CSS Combinators
  • CSS Pseudo Classes
  • CSS Pseudo Elements
  • CSS Opacity
  • CSS Navigation Bar
  • CSS Dropdowns
  • CSS Image Gallery
  • CSS Image Sprites
  • CSS Attribute Selector
  • CSS Styling Forms
  • CSS Counters
  • CSS Units
  • CSS Specificity
  • CSS Website Layout
  • CSS Rounded Corners
  • CSS Border Image Property
  • CSS Multiple Backgrounds
  • CSS Gradient
  • CSS Shadow Effects
  • CSS Text Effects
  • CSS Web Fonts
  • CSS 2D Transforms

Oct Champs & Prizes

  • 1. Pooja Ladda
  • 2. Manjali Kuldharan
  • 3. Pranali Surawar
  • 4. Anjali Kulkarni
  • 5. Vishal Deshmukh

Recent Posts

  • HTML Media
  • jQuery Siblings
  • Bootstrap 4 Cards
  • jQuery Descendants
  • jQuery Ancestors

CSS Styling Forms

Forms are created by using HTML forms and by using the CSS, you can create an interactive forms for the user. There are many CSS properties available which can be used to create and style HTML forms to make them more interactive, some of which are as follows:

Styling the Width of Input

The width property is used to set the width of the input field.
Consider the below example where the width is set to be 50% of the entire screen.

Example:

The below example applies to all <input> elements. But you only want to style a specific input type, you can use attribute selectors. For example: input[type=text], input[type=number], etc.
input {

width: 50%;

}
Try it

Add Padding in Inputs

The padding property is used to add spaces inside the text field.

Example:

input {

width: 100%;

padding: 10px;

}
Try it

Set Margin for Inputs

The margin property is used to add space outside the input field. It is helpful when there are many inputs.

Example:

input {

width: 100%;

margin: 10px 0;

}
Try it

Adding Border and Border-radius

The border property is used to bring change in the size and color of the border whereas border-radius property is used for adding rounded corners.
Consider the below example where a 3px solid blue border is created with a border-radius of 5px.

Example:

input {

border: 3px solid blue;

border-radius: 5px;

}
Try it
Users can also have a border on any particular side and remove others. Consider the below example where the user wants to border only on the bottom.

Example:

input {

border: none;

border-bottom: 3px solid blue;

}
Try it

Adding Color to text and Background

The color property is used to change the color of the text in the input and the background-color property is used to change the color of the background of the input field.
Consider the below example where the color of the text is black and the background color is set to orange.

Example:

input {

background-color: #ff5722;

color: black;

}
Try it

Focused Inputs

When we click on the input field it gets an outline of blue color. You can change this behavior by using :focus selector.
Consider the below example where the user wants a 2px solid black outline and orange background when focused.

Example:

input:focus {

background-color: #ff5722;

border: 2px solid #000;

}
Try it

Adding images in the Input form

The background-image property can be used to put an image inside the input form and it can be positioned using background-position property and the user can also decide whether to repeat or not.
Consider the example below with an image in the background with no-repeat mode.

Example:

input {

width: 100%;

box-sizing: border-box;

border: 2px solid #ccc;

border-radius: 4px;

font-size: 16px;

background-color: white;

background-image: url('https://www.w3codingschools.com/wp-content/uploads/2020/01/search-e1580297840263.png');

background-position: -2px -2px;

background-repeat: no-repeat;

padding: 12px 20px 12px 40px;

}
Try it

Animated Search Input

The transition property can be used to change the width of the search input by specifying the relaxed width and focused width along with the time period for which operation will take place.
Consider below example where relaxed input field width is 20% which when focused changes to 50% in 0.5 seconds.

Example:

input {

transition: width 0.5s ease-in-out;

}

input:focus {

width: 50%;

}
Try it

Styling Textareas

By using CSS styling, you can change the width, height, background-color, border, font-size, etc of textarea.

Example:

textarea {

width: 80%;

height: 100px;

padding: 8px 12px;

box-sizing: border-box;

border: 2px solid #e2e2e2;

border-radius: 4px;

background-color: #f1f1f1;

font-size: 14px;

}
Try it

Styling Dropdown Menus

Example:

select {

width: 80%;

padding: 18px 20px;

border: none;

border-radius: 5px;

background-color: #ff5722;

}
Try it

Styling Input Buttons

Example:

input {

background-color: #ff5722;

border: none;

color: white;

font-size: 16px;

padding: 12px 24px;

text-decoration: none;

cursor: pointer;

}
Try it

Responsive Form

Try it

Post navigation

CSS Attribute Selector
CSS Counters

Ask a Question Cancel reply

Your email address will not be published. Required fields are marked *

W3 CODING SCHOOLS © Copyright 2019-20
Privacy policy   Terms of use

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok