SMACSS form module

Developer
Tom
Size
2,762 Kb
Views
24,288
  1. SMACSS form module Previews
  2. SMACSS form module HTML Codes
  3. SMACSS form module CSS Codes

How do I make an smacss form module?

Contains all input types for the module and a layout class.. What is a smacss form module? How do you make a smacss form module? This script and codes were developed by Tom on 01 September 2022, Thursday.

SMACSS form module Previews
IQ Test

SMACSS form module - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SMACSS form module</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form class="m-form"> <label for="id_text">Text</label> <input id="id_text" type="text"> <label for="id_password">Password</label> <input id="id_password" type="password"> <label for="id_email">Email</label> <input id="id_email" type="email"> <label for="id_url">URL</label> <input id="id_url" type="url"> <label for="id_date">Date</label> <input id="id_date" type="date"> <label for="id_month">Month</label> <input id="id_month" type="month"> <label for="id_time">Time</label> <input id="id_time" type="time"> <label for="id_datetime">Datetime</label> <input type="datetime"> <label for="id_datetime-local">Datetime Local</label> <input id="id_datetime-local" type="datetime-local"> <label for="id_week">Week</label> <input id="id_week" type="week"> <label for="id_number">Number</label> <input id="id_number" type="number"> <label for="id_search">Search</label> <input id="id_search" type="search"> <label for="id_tel">Tel</label> <input id="id_tel" type="tel"> <label for="id_color">Color</label> <input id="id_color" type="color"> <label for="id_file">File</label> <input id="id_file" type="file"> <label for="id_radio">Radio</label> <input id="id_radio" name="radio" type="radio"> <input type="radio" name="radio"> <label for="id_checkbox">Checkbox</label> <input id="id_checkbox" type="checkbox" value="Checkbox">
</form>
</body>
</html>

SMACSS form module - Script Codes CSS Codes

.m-form { color: #545454; background: #fbfbfb;
}
.m-form input[type="text"], .m-form input[type="password"], .m-form input[type="email"], .m-form input[type="url"], .m-form input[type="date"], .m-form input[type="month"], .m-form input[type="time"], .m-form input[type="datetime"], .m-form input[type="datetime-local"], .m-form input[type="week"], .m-form input[type="number"], .m-form input[type="search"], .m-form input[type="tel"], .m-form input[type="color"], .m-form select, .m-form textarea { background: #f3f3f3; border: 1px solid #f3f3f3; border-bottom: 1px solid #cbcbcb; border-radius: 4px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.m-form input[type="text"]:focus, .m-form input[type="password"]:focus, .m-form input[type="email"]:focus, .m-form input[type="url"]:focus, .m-form input[type="date"]:focus, .m-form input[type="month"]:focus, .m-form input[type="time"]:focus, .m-form input[type="datetime"]:focus, .m-form input[type="datetime-local"]:focus, .m-form input[type="week"]:focus, .m-form input[type="number"]:focus, .m-form input[type="search"]:focus, .m-form input[type="tel"]:focus, .m-form input[type="color"]:focus, .m-form select:focus, .m-form textarea:focus { outline: 0; border-color: #fbfbfb; border-bottom: 1px solid #cbcbcb;
}
.m-form input[type="file"]:focus,
.m-form input[type="radio"]:focus,
.m-form input[type="checkbox"]:focus { outline: thin solid #129FEA; outline: 1px auto #129FEA;
}
.l-form input[type="text"], .l-form input[type="password"], .l-form input[type="email"], .l-form input[type="url"], .l-form input[type="date"], .l-form input[type="month"], .l-form input[type="time"], .l-form input[type="datetime"], .l-form input[type="datetime-local"], .l-form input[type="week"], .l-form input[type="number"], .l-form input[type="search"], .l-form input[type="tel"], .l-form input[type="color"], .l-form select, .l-form textarea { padding: 0.5em 0.6em; display: inline-block; vertical-align: middle;
}
SMACSS form module - Script Codes
SMACSS form module - Script Codes
Home Page Home
Developer Tom
Username tomleo
Uploaded September 01, 2022
Rating 3
Size 2,762 Kb
Views 24,288
Do you need developer help for SMACSS form module?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom (tomleo) Script Codes
Name
Fixed with using Calc
Form Markup
SVG tooltip using D3
CSS Layered Animation
CSS Border Property
Sibling Combinators
A Pen by Tom
CSS3 Transform play
Using rbga
CSS3 Stuff
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!