Input

CSS tools such as tailwindcss and unocss are recommended. They make UI customization easier and help build smaller CSS files on demand.

CSS input classes in the default stylesheet.

CSS

Basic DOM

Set the is-{type} class to create different input types.

HTML
<input type="text" class="j-input" id="" /><input type="file" class="j-input" id="" /><input type="datetime-local" class="j-input" id="" /><select class="j-select" id="">  <option value="1">Option 1</option>  <option value="2">Option 2</option>  <option value="3">Option 3</option></select><textarea class="j-textarea" id=""></textarea>

Input Size

Set the is-{size} class to create different input sizes.

HTML
<input type="text" class="j-input is-sm" id="" /><input type="text" class="j-input is-md" id="" /><input type="text" class="j-input is-lg" id="" />

Input Group

Use the .input-group or .input-inner-group class to describe input group styles.

text

button

text

button

text

HTML
<div class="input-group">  <div class="el-addon">    <div class="is-text">text</div>  </div>  <input type="text" class="j-input" id="input-group-text" />  <div class="el-addon">    <div class="j-button">button</div>  </div></div><div class="input-inner-group">  <div class="el-addon">icon</div>  <input type="text" class="j-input" id="input-inner-group-text-advanced" />  <div class="el-addon">    <button class="j-button is-icon">icon</button>  </div></div>