安信娱乐谁是老板

拼图开发文档

输入框

简介

输入框是表单用于数据输入元素,包含inputoutputtextareaselectbutton等。

其中单行输入框inputtype包含textpasswordradiocheckboxfilehiddenbuttonsubmitimagereset以及新增的numberdate(month、week、time、datetime、datetime-local)、emailsearchrangecolorurl等。

按钮buttontype包含buttonsubmitreset三个类型。

在上一节,框架定义了按钮的样式,在这一节,我们用.input安信娱乐谁是老板来定义除按钮外表单输入框的样式。

基础表单

框架用.input定义输入框样式,按钮用上一节的.button定义样式:

输出框
    <form>
      <input class="input" placeholder="单行输入框" type="text" />
      <output class="input">输出框</output>
      <textarea class="input" placeholder="多行输入框"></textarea>
      <select class="input"><option>下拉菜单</option><option>下拉菜单</option></select>
      <select class="input" multiple size="2"><option>下拉菜单</option><option>下拉菜单</option><option>下拉菜单</option></select>
      <button class="button">按钮</button>
    </form>
  

输入框类别

input的类型比较多,部份形式有些差异,如hidden不显示,radiocheckboxfile不适用.input样式及buttonsubmitimagereset为按钮使用.button安信娱乐谁是老板样式外,其余的效果如下:

    <form>
      <input class="input" type="text" placeholder="文本" />
      <input class="input" type="password" placeholder="密码" />
      <input class="input" type="number" placeholder="数字" />
      <input class="input" type="date" placeholder="日期" />
      <input class="input" type="email" placeholder="邮箱" />
      <input class="input" type="search" placeholder="搜索" />
      <input class="input" type="range" placeholder="范围" />
      <input class="input" type="color" placeholder="颜色" />
      <input class="input" type="url" placeholder="网址" />
    </form>
  

只读禁用状态

表单元素包含只读readonly、禁用disabled,为不可操作状态:

只读

    <form>
      <input class="input" readonly="readonly" type="text" placeholder="只读" />
    </form>
  

禁用

    <form>
      <input class="input" disabled="disabled" type="text" placeholder="禁用" />
    </form>
  

纯文本

在表单应用时,纯文本可用于只呈现但不可操作的内容显示,在.input的基础上叠加样式.input-text

纯文本
    <div class="input input-text">纯文本</div>
  

尺寸

框架定义了小尺寸.input-small和大尺寸.input-big输入框:

    <form>
      <input class="input input-small" type="text" placeholder="小输入框" />
      <input class="input" type="text" placeholder="默认" />
      <input class="input input-big" type="text" placeholder="大输入框" />
    </form>
  

另外,还可以通过改变文本字号大小来改变输入框大小:

    <form>
      <input class="input size-small" type="text" placeholder="小号文本" />
      <input class="input" type="text" placeholder="默认文本" />
      <input class="input size-big" type="text" placeholder="大号文本" />
    </form>
  

自动宽

默认的.input样式宽为100%,叠加.input-auto样式,由size控制长度。

    <form>
      <input class="input input-auto" type="text" size="30" placeholder="自动宽" />
    </form>
  

风格设置

结合框架根据整体风格,灵活应用盒子模型相关懊悔及颜色样式,美化相关样式。

圆角

    <form>
      <input class="input radius-large" type="text" placeholder="圆角" />
      <input class="input radius-none" type="text" placeholder="直角" />
    </form>
  

颜色

    <form>
      <input class="input text-main" type="text" placeholder="文本色" />
      <input class="input border-main" type="text" placeholder="边框色" />
      <input class="input bg-main bg-inverse" type="text" placeholder="背景色" />
    </form>