Styling Forms

Add a Touch of Brilliance with CSS

Want to turn mundane forms into true masterpieces? With the right magical incantations, your input fields, buttons, and text areas can transform into sparkling gems. A dash of padding, and your content floats as gracefully as clouds. A refined border, and your form looks as though it’s wrapped in the finest parchment. Add a background-color, and you’ll weave colors that make your page shine.

Here, you’ll learn how to enchant your form fields with a touch of magic, making them glitter with elegance and usability. Every input field may present a small challenge, but with the right spells, you’ll craft a form that’s a feast for the eyes!

Let’s Keep Going

General Styles for Forms
Form Fields in Focus

Stylish Instructions
Type

Forms in CSS

Style, optimize, highlight – make inputs user-friendly and beautiful!

General Styles for Forms

Use What You’ve Learned

Borders and Spacing
A great form starts with a sturdy frame, much like the walls of a wizard’s academy holding everything together. Use border for the walls, padding for cozy interiors, and margin to keep curious visitors at bay.

Backgrounds, Colors, and Shadows
The background is the canvas for your magical scroll. Use background-color to set the mood—mystical, cheerful, or dramatic—and color to conjure words that dance upon it. Shadows (box-shadow) add depth, making your form stand out like an enchanted relic.

Fonts and Sizes
No epic tale is complete without majestic fonts. Wield font-family as your style wand, and let font-size ensure even the dragon in the farthest cave can read your words.

Alignment
Use text-align to line up your words neatly. If elements lose their place, vertical-align restores order, ensuring harmony across your design.

Interactions
With spells like :hover, :focus, and :active, bring your fields to life. A touch of magic, and they glow, shift, or invite interaction like portals to another realm.

Transitions and Animations
No mage enters the stage without a flair for showmanship. Use transition to make colors and shadows glide seamlessly from one state to another, as though a portal is opening before your very eyes.

Flexbox and Grid for Layout
Think of display: flex and grid-template-areas as the architects of your magic. They align every element, creating a harmonious and structured symphony of your form’s design.

Form Fields in Focus

Activate the Magical Glow

When a form field is activated by the user, the focus state comes into play. This is your chance to add a touch of magic and make the field shine with a special glow. Change the border color, background, or other styles to highlight it. After all, everyone should know that this field is now in the spotlight!

input:focus {
    border-color: orange;
    background-color: black;
}

Here, you style your inputs to change their border and background color in the focus state

Stylish Instructions

Grant the Placeholder Elegance

Placeholder text doesn’t have to stay invisible! With the ::placeholder pseudo-element, you can style it to blend elegantly into your website’s design. Adjust the color, font, and size to your liking. This transforms the placeholder into a whispering guide that gently directs the user without disrupting your site’s aesthetic.

input::placeholder {
    color: #9e9e9e;
    font-style: italic;
}

This example gives the placeholder text a gray color and italic font

Type

The Hidden Magic of Input Attributes

With the powerful attributes of input types, you can unleash precise styling spells. For example, input[type=”text”] lets you target text fields specifically without needing individual classes for each field. This precise magic allows you to style different input types like text, email, or password individually, ensuring every field gets the attention it deserves and your form radiates a harmonious design.

input[type="text"] {
    padding: 10px;
    border: 2px dotted #ccc;
    border-radius: 5px;
    background-color: purple;
    color: white;
}

Here, you style text input fields with specific styles

In this lesson, you have learned…

How to style form fields with CSS by adjusting borders, spacing, colors, fonts, and backgrounds.
How to use interactive effects like :hover, :focus, or :active to make your forms lively and user-friendly.
How to elegantly design the ::placeholder text to embed subtle hints stylishly into your forms.
Why using input types in the selector (e.g., input[type="text"]) allows you to style different form fields individually.

Here you can see the code you’ve practiced – but feel free to experiment! Try out changes, test new ideas, and see what happens. This is your space for tinkering!

The Enchanted Scroll

In a forgotten corner of an ancient archive lies a magical scroll, once the keeper of the secrets of the forest guardians. But beware—it reveals its contents only to those who treat it with care! If its fields are elegantly styled and respond gracefully to touch, the scroll will unveil its wonders. Your task: transform form fields with CSS into true works of art. Make them shimmer when hovered and glow under focus. Even the placeholders should be so captivating that even a grumpy wizard would take a second glance.

Your Task: Style a Form

Design the basic input fields: Use padding, border, border-radius, background-color, and color to style input fields and text areas.
Style the placeholders (::placeholder): Adjust the placeholder color and tweak its transparency to make it visually appealing and subtly stand out.
Add hover and focus effects: Create CSS rules for :hover and :focus states to make the input fields visually respond during interactions.
Button styling: Use background-color and border-radius to style the button. Add a hover effect for extra flair when users interact with it.

Open Visual Studio Code and make these words appear on the page. Or try it right here in the editor!

Open Editor in a New Tab

CSS

/* Basic Designs - Input-Fields */
input[type="text"],
input[type="number"],
textarea {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 2px solid darkgreen;
    border-radius: 5px;
    background-color: #f0f0f0;
    color: black;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
    color: grey;
    opacity: 0.7;
}

/* Hover-Effect */
input[type="text"]:hover,
input[type="number"]:hover,
textarea:hover {
    border-color: green;
    background-color: #e0ffe0;
}

/* Focus-Effect */
input[type="text"]:focus,
input[type="number"]:focus,
textarea:focus {
    border-color: darkblue;
    background-color: white;
    outline: none;
}

/* Button*/
button {
    padding: 10px 20px;
    background-color: darkgreen;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: green;
}

Let’s Keep Going