style-forge.form v2.0.1

style-forge.form

This is styling of all input fields

Form CSS for style-forge

Installation

npm install style-forge.form

yarn add style-forge.form

<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>

<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>

<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>

<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 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>

<label class="switch">
  <input type="checkbox" checked>
  Remember me
</label>

Loading

<label class="switch" loading>
  <input type="checkbox" checked>
  Remember me
</label>

<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>

<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 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>

<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>

<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

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