输入框

推荐使用 tailwindcss, unocss 等 CSS 工具，更有利于个性化定制 UI 和按需构建最小化 CSS 文件。

默认样式文件中的 CSS 输入框类。

CSS

基础 DOM

使用类 j-{type} 来描述输入框类型样式。

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">选项1</option>  <option value="2">选项2</option>  <option value="3">选项3</option></select><textarea class="j-textarea" id=""></textarea>

输入框尺寸

设置类 is-{size} 实现不同尺寸的输入框。

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 或 .input-inner-group 来描述输入框组样式。

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>