## mo-input
> 输入框类。
每个类均可单独使用,样式类(包括圆角)和尺寸类可混用 (如需要添加一个大尺寸的大圆角的文本框则需要使用 `class="mo-input--pill mo-input--large"`混合使用)。
如果要禁用文本框,只需要给文本框添加`disabled`属性;
如果要制度文本框,只需要给文本框添加`readonly`属性
`mo-input`类同样适用于`select`下拉框和`textarea`长文本框,只不过尺寸样式对于`multiple`的`select`以及`textarea`无效,`textarea`高度需要使用`rows`属性来控制
### api
| className | 描述 | 备注 |
| --- | --- | --- |
| `mo-input` | 默认样式 | `height: 34px` |
| `mo-input--primary` | 主色调 | `#0275d8` |
| `mo-input--negative` | 消极色 | `#5cb85c` |
| `mo-input--positive` | 积极色 | `#d9534f` |
| `mo-input--radius` | 小圆角 | `border-radius: 2px` |
| `mo-input--pill` | 大圆角 | `border-radius: 200px` |
| `mo-input--small` | 小尺寸 | `height: 30px` |
| `mo-input--large` | 大尺寸 | `height: 44px` |
### demo
``` html
默认
<input class="mo-input">
主色调
<input class="mo-input--primary">
积极色调
<input class="mo-input--positive">
消极色调
<input class="mo-input--negative">
小尺寸
<input class="mo-input--small">
大尺寸
<input class="mo-input--large">
小圆角
<input class="mo-input--radius">
大圆角
<input class="mo-input--pill">
只读文本框
<input class="mo-input" readonly>
禁用文本框
<input class="mo-input" disabled>
用于select
<select class="mo-input">
</select>
用于textarea
<textarea class="mo-input"></textarea>
```
### 自定义
``` scss
@import './mixins/input';
//自定义样式(背景,颜色)
.mo-input--[style] {
@include inputStyle ($border, $focusBorder);
}
//自定义尺寸
$my-input-size : (font-size:14px, line-height:1.4286, padding-y:6px, padding-x:16px) !default;
.mo-input--[size] {
@include inputSize ($my-input-size);
}
```