表单

3.4.1 input,textarea 文本域 文本区域

文本框样式 .input-text，文本域样式 .textarea，追加 .radius 就会显示css3圆角效果。

不支持圆角和背景渐变浏览器，如IE低版本，会显示扁平纯色直角效果。

文本框尺寸

定义了五种规格尺寸

HTML代码

<input type="text" placeholder="迷你尺寸" class="input-text radius size-MINI">
<input type="text" placeholder="小尺寸" class="input-text radius size-S">
<input type="text" placeholder="默认尺寸" class="input-text radius size-M">
<input type="text" placeholder="大尺寸" class="input-text radius size-L">
<input type="text" placeholder="特大尺寸" class="input-text radius size-XL">

CSS代码

/*默认状态*/
.input-text,.textarea{box-sizing:border-box;border:solid 1px #ddd;width:100%;
    -webkit-transition:all 0.2s linear 0s;
       -moz-transition:all 0.2s linear 0s;
         -o-transition:all 0.2s linear 0s;
            transition:all 0.2s linear 0s}
.textarea{ height:auto; font-size:14px; padding:4px}
.input-text:hover,.textarea:hover{border: solid 1px #3bb4f2}
/*得到焦点后*/
.input-text.focus,textarea.focus{border:solid 1px #0f9ae0 \9;border-color:rgba(82,168,236,0.8);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)}
/*不可点击*/
.input-text.disabled,.textarea.disabled,.input-text.disabled.focus,.textarea.disabled.focus{background-color:#ededed; cursor:default;border-color: #ddd;
  -webkit-box-shadow:inset 0 2px 2px #e8e7e7;
       -moz-box-shadow:inset 0 2px 2px #e8e7e7;
            box-shadow:inset 0 2px 2px #e8e7e7}
/*只读状态*/
.input-text.disabled,.textarea.disabled{background-color:#e6e6e6; cursor:default}
/*阴影*/
.input-text.box-shadow,.textarea.box-shadow{-ms-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075)}

3.4.2 radio,checkbox 单选 多选

使用icheck插件进行美化。

H-ui.js 中已封装，无需单独下载。单独下载地址 打包下载

HTML代码

<div class="skin-minimal">
  <div class="check-box">
    <input type="checkbox" id="checkbox-1">
    <label for="checkbox-1">复选框</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="checkbox-2" checked>
    <label for="checkbox-2">复选框 checked状态</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="checkbox-disabled" disabled>
    <label for="checkbox-disabled">Disabled</label>
  </div>
  <div class="check-box">
    <input type="checkbox" id="checkbox-disabled-checked" checked disabled>
    <label for="checkbox-disabled-checked">Disabled &amp; checked</label>
  </div>
</div>
<div class="mt-20 skin-minimal">
  <div class="radio-box">
    <input type="radio" id="radio-1" name="demo-radio1">
    <label for="radio-1">单选按钮</label>
  </div>
  <div class="radio-box">
    <input type="radio" id="radio-2" name="demo-radio1" checked>
    <label for="radio-2">单选按钮 checked状态</label>
  </div>
  <div class="radio-box">
    <input type="radio" id="radio-disabled" disabled>
    <label for="radio-disabled">Disabled</label>
  </div>
  <div class="radio-box">
    <input type="radio" id="radio-disabled-checked" checked disabled>
    <label for="radio-disabled-checked">Disabled &amp; checked</label>
  </div>
</div>

JS代码

$(function(){
  $('.skin-minimal input').iCheck({
    checkboxClass: 'icheckbox-blue',
    radioClass: 'iradio-blue',
    increaseArea: '20%'
  })});

Switch 效果

H-ui.js 中已封装，无需单独下载。单独下载地址 打包下载

点击查看更多效果

3.4.3 select 下拉框

select是个奇葩的表单组件，是表单元素中通过css最难美化的一个，各个浏览器显示都存在很大差异。

原生效果

原生select 菜单一 菜单二 菜单三

原生美化方式：

1、为select外层嵌套个 标签，设置边框，圆角，隐藏掉select本身的表框。

HTML代码

<span class="select-box">
  <select class="select" size="1" name="demo1">
    <option value="" selected>默认select</option>
    <option value="1">菜单一</option>
    <option value="2">菜单二</option>
    <option value="3">菜单三</option>
  </select>
</span>

CSS代码

/*方法一、修改源生*/
.select-box{border:solid 1px #ddd;box-sizing:border-box;vertical-align:middle; width:100%; display:inline-block}
  .select{border:solid 1px #ddd;box-sizing:border-box;cursor: pointer;line-height:normal;font-weight: normal;width:100%; white-space:nowrap}
.select-box .select{ border:none}
.select-box.inline,.select-box.inline .select{ width:auto}
.select-box,.select-box.size-M{padding:4px 5px}
  .select,.size-M .select{font-size: 14px}
.select-box.size-MINI{padding:0px 5px}
  .size-MINI .select{font-size: 12px}
.select-box.size-S{padding:3px 5px}
  .size-S .select{font-size: 12px}
.select-box.size-L{padding:8px 5px}
  .size-L .select{font-size: 16px}
.select-box.size-XL{padding:10px 5px}
  .size-XL .select{font-size: 18px}
@media (max-width: 767px) {
  .responsive .select-box{ border:none}
  .responsive .select-box .select,
  .responsive .select{border:solid 1px #ddd; padding:10px;font-size:16px}
  .responsive .select-box,
  .responsive .select-box.size-M,
  .responsive .select-box.size-MINI,
  .responsive .select-box.size-S,
  .responsive .select-box.size-L,
  .responsive .select-box.size-XL{ height:auto; padding:0}
}

是

3.4.4 input-file 文件上传

input file 是另一个奇葩组件，一直以来都是前端开发的噩梦，原生的基本无法通过CSS美化。基于原生的做法：把文件选择域设为透明,通过绝对定位覆盖在长的好看的按钮上面。优点：完全源生。兼容性好，统一浏览器显示效果。

原生效果

手动在文本框上加style="width: " 来控制input框的宽度。

HTML代码

//上传按钮
<span class="btn-upload">
  <a href="javascript:void();" class="btn btn-primary radius btn-upload"><i class="Hui-iconfont">&#xe642;</i> 浏览文件</a>
  <input type="file" multiple name="file_0" class="input-file">
</span>

//带文本框
<span class="btn-upload form-group">
  <input class="input-text upload-url radius" type="text" name="uploadfile-1" id="uploadfile-1" readonly><a href="javascript:void();" class="btn btn-primary radius"><i class="iconfont">&#xf0020;</i> 浏览文件</a>
  <input type="file" multiple name="file-1" class="input-file">
</span>

CSS代码

.btn-upload{position: relative; display:inline-block;height:36px; *display:inline;overflow:hidden;vertical-align:middle;cursor:pointer}
.upload-url{cursor: pointer}
.input-file{position:absolute; right:0; top:0; cursor: pointer; z-index:1; font-size:30em; *font-size:30px;opacity:0;filter: alpha(opacity=0)}
.btn-upload .input-text{ width:auto}
.form-group .upload-btn{ margin-left:-1px}

3.4.5 表单布局

3.4.6 表单验证

两种验证插件：jQuery.Validate.js和Validform.js