This is styling of all input fields
Form CSS for style-forge
npm install style-forge.formyarn add style-forge.formInput
<div class="input">
<input type="text" placeholder="text" />
<label>text</label>
<span class="shape"></span>
</div><div class="input">
<input type="search" placeholder="search" />
<label>search</label>
<span class="shape"></span>
</div><div class="input">
<input type="email" placeholder="email" />
<label>email</label>
<span class="shape"></span>
</div><div class="input">
<input type="number" placeholder="number" />
<label>number</label>
<span class="shape"></span>
</div><div class="input">
<input type="password" placeholder="password" autocomplete="off" />
<label>password</label>
<span class="shape"></span>
</div><div class="input">
<input type="tel" placeholder="tel" />
<label>tel</label>
<span class="shape"></span>
</div><div class="input">
<input type="url" placeholder="url" />
<label>url</label>
<span class="shape"></span>
</div><input type="color" /><input type="file" /><input type="image" src="" alt="" /><input type="range" />Loading
<div class="input">
<input type="text" placeholder="text" loading />
<label>text</label>
<span class="shape"></span>
</div>Required
<div class="input">
<input type="text" placeholder="text" required />
<label>text</label>
<span class="shape"></span>
</div>Readonly
<div class="input">
<input type="text" placeholder="text" value="Text readonly" readonly />
<label>text</label>
<span class="shape"></span>
</div>Disabled
<div class="input">
<input type="text" placeholder="text" value="Text disabled" disabled />
<label>text</label>
<span class="shape"></span>
</div>Error
<div class="input error">
<input type="text" placeholder="text" required />
<label>text</label>
<span class="shape"></span>
</div>
<div class="error">This input needed fill</div>Button
<input class="button" type="button" value="button" /><input class="button" type="reset" /><input class="button" type="submit" /><button class="button" type="button">button</button><button class="button" type="submit">submit</button><button class="button" type="reset">reset</button>Loading
<input class="button" type="button" value="button" loading /><button class="button" type="button" loading>button</button>Disabled
<input class="button" type="button" value="button" disabled /><button class="button" type="button" disabled>button</button>Checkbox
<label class="checkbox">
<input type="checkbox" checked>
Text
</label>Loading
<label class="checkbox" loading>
<input type="checkbox" checked>
Text
</label>Disabled
<label class="checkbox">
<input type="checkbox" checked disabled>
Text
</label>Radio
<label class="radio">
<input type="radio" name="radio" checked />
First
</label>
<label class="radio">
<input type="radio" name="radio" disabled />
Second
</label>Loading
<label class="radio" loading>
<input type="radio" name="radio" checked />
First
</label>
<label class="radio">
<input type="radio" name="radio" disabled />
Second
</label>Select
<select class="select">
<option value="o1" disabled>First</option>
<option value="o2">Second</option>
<option value="o3">Third</option>
<option value="o4">Fourth</option>
</select>Loading
<select class="select" loading>
<option value="o1" disabled>First</option>
<option value="o2">Second</option>
<option value="o3">Third</option>
<option value="o4">Fourth</option>
</select>Disabled
<select class="select" disabled>
<option value="o1">First</option>
<option value="o2">Second</option>
<option value="o3">Third</option>
<option value="o4">Fourth</option>
</select>Multiple
<select class="select" multiple>
<option value="o1" disabled>First</option>
<option value="o2">Second</option>
<option value="o3">Third</option>
<option value="o4">Fourth</option>
</select>Group
<select class="select">
<optgroup label="Group One" disabled>
<option value="o1">First</option>
<option value="o2">Second</option>
</optgroup>
<optgroup label="Group Two">
<option value="o3" disabled>Third</option>
<option value="o4">Fourth</option>
</optgroup>
</select>Switch
<label class="switch">
<input type="checkbox" checked>
Remember me
</label>Loading
<label class="switch" loading>
<input type="checkbox" checked>
Remember me
</label>Switch [multiple Radio]
<div class="switch" multiple>
<div class="switch-toggle">
<label><input name="state" type="radio" /><span>-1</span></label>
<label><input name="state" type="radio" /><span>Off</span></label>
<label disabled><input name="state" type="radio" checked disabled /><span>Default</span></label>
<label><input name="state" type="radio" /><span>On</span></label>
</div>
<div class="switch-label">triple and more...</div>
</div>Vertical
<div class="switch" multiple>
<div class="switch-toggle" vert>
<label><input name="state" type="radio" /><span>-1</span></label>
<label><input name="state" type="radio" /><span>Off</span></label>
<label disabled><input name="state" type="radio" checked disabled /><span>Default</span></label>
<label><input name="state" type="radio" /><span>On</span></label>
</div>
<div class="switch-label">triple and more...</div>
</div>Loading
<div class="switch" multiple>
<div class="switch-toggle" loading>
<label><input name="state" type="radio" /><span>-1</span></label>
<label><input name="state" type="radio" /><span>Off</span></label>
<label disabled><input name="state" type="radio" checked disabled /><span>Default</span></label>
<label><input name="state" type="radio" /><span>On</span></label>
</div>
<div class="switch-label">triple and more...</div>
</div>Switch [multiple Checkbox]
<div class="switch" multiple>
<div class="switch-toggle">
<label><input name="state" type="checkbox" /><span>-1</span></label>
<label><input name="state" type="checkbox" /><span>Off</span></label>
<label disabled><input name="state" type="checkbox" disabled /><span>Default</span></label>
<label><input name="state" type="checkbox" /><span>On</span></label>
</div>
<div class="switch-label">triple and more...</div>
</div>Vertical
<div class="switch" multiple>
<div class="switch-toggle" vert>
<label><input name="state" type="checkbox" /><span>-1</span></label>
<label><input name="state" type="checkbox" /><span>Off</span></label>
<label disabled><input name="state" type="checkbox" disabled /><span>Default</span></label>
<label><input name="state" type="checkbox" /><span>On</span></label>
</div>
<div class="switch-label">triple and more...</div>
</div>Loading
<div class="switch" multiple>
<div class="switch-toggle" loading>
<label><input name="state" type="checkbox" /><span>-1</span></label>
<label><input name="state" type="checkbox" /><span>Off</span></label>
<label disabled><input name="state" type="checkbox" disabled /><span>Default</span></label>
<label><input name="state" type="checkbox" /><span>On</span></label>
</div>
<div class="switch-label">triple and more...</div>
</div>textarea
<textarea class="textarea" placeholder="textarea"></textarea>Required
<textarea class="textarea" placeholder="textarea" required></textarea>Readonly
<textarea class="textarea" placeholder="textarea readonly" readonly></textarea>Disabled
<textarea class="textarea" placeholder="textarea disabled" disabled></textarea>Loading
<textarea class="textarea" placeholder="textarea disabled" loading></textarea>time
<div class="input">
<input type="time" value="01:00" />
<label>time</label>
<span class="shape"></span>
</div><div class="input">
<input type="week" value="2023-W01" />
<label>week</label>
<span class="shape"></span>
</div><div class="input">
<input type="month" value="2023-01" />
<label>month</label>
<span class="shape"></span>
</div><div class="input">
<input type="date" value="2023-01-01" />
<label>date</label>
<span class="shape"></span>
</div><div class="input">
<input type="datetime-local" value="2023-01-01T01:00" />
<label>datetime-local</label>
<span class="shape"></span>
</div>datalist
<div class="input">
<input list="browsers" name="browser" placeholder="browsers" />
<label>browsers</label>
<span class="shape"></span>
<datalist id="browsers">
<option label="IE">Internet Explorer</option>
<option label="FF">Firefox</option>
<option label="Chrome">Google</option>
<option label="Opera">Mini</option>
<option label="Safari">Apple</option>
</datalist>
</div>
Distributed under the MIT License. See LICENSE for more information.