JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q50974F
  • License MIT

Form CSS for style-forge

Package Exports

  • style-forge.form
  • style-forge.form/form.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (style-forge.form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

style-forge.form

This is styling of all input fields

npm npm

Form CSS for style-forge

Installation

npm install style-forge.form
yarn add style-forge.form
Input 
<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>

License NPM

Distributed under the MIT License. See LICENSE for more information.