首页>基础>表单

表单

文章转载，请注明出处 H-ui前端框架，网址http://www.h-ui.net/

3.4.1 input,textarea 文本域 文本区域

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

默认效果 class="" 圆角效果 class=""
input-text input-text radius
input-text input-text radius
textarea textarea radius

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

文本框尺寸

定义了五种规格尺寸

文本框 class=""
hui-input-text radius size-MINI
hui-input-text radius size-S
hui-input-text radius size-M
hui-input-text radius size-L
hui-input-text radius size-XL
HTML SCSS CSS 
<input type="text" class="hui-input-text"  placeholder="文本框" />

<input type="password" class="hui-input-text"  placeholder="密码" />

<textarea name="" cols="" rows="" class="hui-textarea"  placeholder="说点什么..."></textarea>

@mixin transition($v) {
  transition: $v;
}
@mixin boxShadow($v) {
  box-shadow: $v;
}
@mixin borderRadius($v) {
  -ms-border-radius: &v;
  border-radius: $v;
}
.hui-input-text,
.hui-textarea {
  box-sizing: border-box;
  border: solid 1px #ddd;
  width: 100%;
  @include transition(all 0.2s linear 0s);
  padding: 5px 10px;
}

.hui-textarea {
  height: 100px;
  resize: none;
  font-size: 14px;
  word-break: break-all;
}

.hui-textarea-numberbar {
  position: absolute;
  right: 20px;
  bottom: 5px;
  z-index: 1;
  margin-bottom: 0;
}

.hui-textarea-length {
  font-style: normal;
}

.hui-input-text:hover,
.hui-textarea:hover {
  border: solid 1px #3bb4f2;
}

/*得到焦点后*/
.hui-input-text.focus,
.hui-textarea.focus {
  border: solid 1px #0f9ae0 \9;
  border-color: rgba(82, 168, 236, 0.8);
  @include boxShadow('0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)');
}
/*不可点击*/
.hui-input-text.disabled,
.hui-textarea.disabled,
.hui-input-text.disabled.focus,
.hui-textarea.disabled.focus {
  background-color: #ededed;
  cursor: default;
  border-color: #ddd;
  @include boxShadow(inset 0 2px 2px #e8e7e7);
}
/*只读状态*/
.hui-input-text.disabled,
.hui-textarea.disabled {
  background-color: #e6e6e6;
  cursor: default;
}

/*阴影*/
.hui-input-text.box-shadow,
.hui-textarea.box-shadow {
  @include boxShadow(inset 0 1px 1px rgba(0, 0, 0, 0.075));
}

/*行内元素*/
.hui-input-text.inline {
  display: inline-block;
  width: auto;
}

/*默认状态*/
.hui-input-text,
.hui-textarea {
  box-sizing: border-box;
  border: solid 1px #ddd;
  width: 100%;
  transition: all 0.2s linear 0s;
  padding: 5px 10px;
}

.hui-textarea {
  height: 100px;
  resize: none;
  font-size: 14px;
  word-break: break-all;
}

.hui-textarea-numberbar {
  position: absolute;
  right: 20px;
  bottom: 5px;
  z-index: 1;
  margin-bottom: 0;
}

.hui-textarea-length {
  font-style: normal;
}

.hui-input-text:hover,
.hui-textarea:hover {
  border: solid 1px #3bb4f2;
}

/*得到焦点后*/
.hui-input-text.focus,
.hui-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)";
}

/*不可点击*/
.hui-input-text.disabled,
.hui-textarea.disabled,
.hui-input-text.disabled.focus,
.hui-textarea.disabled.focus {
  background-color: #ededed;
  cursor: default;
  border-color: #ddd;
  box-shadow: inset 0 2px 2px #e8e7e7;
}

/*只读状态*/
.hui-input-text.disabled,
.hui-textarea.disabled {
  background-color: #e6e6e6;
  cursor: default;
}

/*阴影*/
.hui-input-text.box-shadow,
.hui-textarea.box-shadow {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

/*行内元素*/
.hui-input-text.inline {
  display: inline-block;
  width: auto;
}

3.4.2 radio,checkbox 单选 多选

使用icheck插件进行美化。

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

HTML JS 
<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>
$(function(){
  $('.skin-minimal input').iCheck({
    checkboxClass: 'icheckbox-blue',
    radioClass: 'iradio-blue',
    increaseArea: '20%'
})});

3.4.3 Switch

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

点击查看更多效果

HTML SCSS CSS 
<div class="switch" data-on="primary" data-off="info">
  <input type="checkbox" checked />
</div>
.has-switch {
  display: inline-block;
  cursor: pointer;
  @include borderRadius(5px);
  border: 1px solid;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  position: relative;
  text-align: left;
  overflow: hidden;
  line-height: 8px;
  -ms-user-select: none;
  user-select: none;
  min-width: 100px;
  &.size-MINI {
      min-width: 72px
  }
  &.size-S {
      min-width: 80px
  }
  &.size-L {
      min-width: 120px
  }
  &.deactivate {
      opacity: .5;
      filter: alpha(opacity=50);
      cursor: default!important;
      label,
      span {
          cursor: default!important
      }
  }
  > div {
      display: inline-block;
      width: 150%;
      position: relative;
      top: 0;
      &.switch-animate {
          -ms-transition: left .5s;
          transition: left .5s
      }
      &.switch-off {
          left: -50%
      }
      &.switch-on {
          left: 0
      }
  }
  input[type=checkbox] {
      display: none
  }
  span,
  label {
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    padding-top: 4px;
    font-size: 14px;
    line-height: 20px;
    &.size-MINI {
      padding-bottom: 4px;
      padding-top: 4px;
      font-size: 10px;
      line-height: 9px;
    }
    &.size-S {
      padding-bottom: 3px;
      padding-top: 3px;
      font-size: 12px;
      line-height: 18px;
    }
    &.size-L {
      padding-bottom: 9px;
      padding-top: 9px;
      font-size: 16px;
      line-height: normal;
    }
  }
  label {
    text-align: center;
    margin-top: -1px;
    margin-bottom: -1px;
    z-index: 100;
    width: 34%;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    background-image: -ms-linear-gradient(top, #fff, #e6e6e6);
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #e6e6e6;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    &:hover,
    &:focus,
    &:active,
    &.active,
    &.disabled,
    &[disabled] {
      color: #fff;
      background-color: #e6e6e6;
      *background-color: #d9d9d9;
    }
    &:active,
    &.active {
      background-color: #ccc \9;
    }
    i {
      color: #000;
      text-shadow: 0 1px 0 #fff;
      line-height: 18px;
      pointer-events: none
    }
  }
  span {
      text-align: center;
      z-index: 1;
      width: 33%;
      &.switch-left {
          -ms-border-radius-topleft: 4px;
          border-top-left-radius: 4px;
          -ms-border-radius-bottomleft: 4px;
          border-bottom-left-radius: 4px
      }
      &.switch-right {
          color: #333;
          text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
          background-color: #f0f0f0;
          background-image: -moz-linear-gradient(top, #e6e6e6, #fff);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#fff));
          background-image: -webkit-linear-gradient(top, #e6e6e6, #fff);
          background-image: -o-linear-gradient(top, #e6e6e6, #fff);
          background-image: linear-gradient(to bottom, #e6e6e6, #fff);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0);
          border-color: #fff #fff #d9d9d9;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #fff;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #333;
              background-color: #fff;
              *background-color: #f2f2f2;
          }
          &:active,
          &.active {
              background-color: #e6e6e6 \9;
          }
      }
          
      &.switch-primary,
      &.switch-left {
          color: #fff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          background-color: #005fcc;
          background-image: -moz-linear-gradient(top, #04c, #08c);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04c), to(#08c));
          background-image: -webkit-linear-gradient(top, #04c, #08c);
          background-image: -o-linear-gradient(top, #04c, #08c);
          background-image: linear-gradient(to bottom, #04c, #08c);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0044cc', endColorstr='#ff0088cc', GradientType=0);
          border-color: #08c #08c #005580;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #08c;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #fff;
              background-color: #08c;
              *background-color: #0077b3;
          }
          &:active,
          &.active {
              background-color: #069 \9;
          }
      }

      &.switch-info {
          color: #fff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          background-color: #41a7c5;
          background-image: -moz-linear-gradient(top, #2f96b4, #5bc0de);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f96b4), to(#5bc0de));
          background-image: -webkit-linear-gradient(top, #2f96b4, #5bc0de);
          background-image: -o-linear-gradient(top, #2f96b4, #5bc0de);
          background-image: linear-gradient(to bottom, #2f96b4, #5bc0de);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2f96b4', endColorstr='#ff5bc0de', GradientType=0);
          border-color: #5bc0de #5bc0de #28a1c5;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #5bc0de;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #fff;
              background-color: #5bc0de;
              *background-color: #46b8da;
          }
          &:active,
          &.active {
              background-color: #31b0d5 \9
          }
      }
      
      
      &.switch-success {
          color: #fff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          background-color: #58b058;
          background-image: -moz-linear-gradient(top, #51a351, #62c462);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#51a351), to(#62c462));
          background-image: -webkit-linear-gradient(top, #51a351, #62c462);
          background-image: -o-linear-gradient(top, #51a351, #62c462);
          background-image: linear-gradient(to bottom, #51a351, #62c462);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff51a351', endColorstr='#ff62c462', GradientType=0);
          border-color: #62c462 #62c462 #3b9e3b;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #62c462;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #fff;
              background-color: #62c462;
              *background-color: #4fbd4f
          }
          &:active,
          &.active {
              background-color: #42b142 \9;
          }
      }
      &.switch-warning {
          color: #fff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          background-color: #f9a123;
          background-image: -moz-linear-gradient(top, #f89406, #fbb450);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f89406), to(#fbb450));
          background-image: -webkit-linear-gradient(top, #f89406, #fbb450);
          background-image: -o-linear-gradient(top, #f89406, #fbb450);
          background-image: linear-gradient(to bottom, #f89406, #fbb450);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff89406', endColorstr='#fffbb450', GradientType=0);
          border-color: #fbb450 #fbb450 #f89406;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #fbb450;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #fff;
              background-color: #fbb450;
              *background-color: #faa937
          }
          &:active,
          &.active {
              background-color: #fa9f1e \9
          }
      }
      &.switch-danger {
          color: #fff;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          background-color: #d14641;
          background-image: -moz-linear-gradient(top, #bd362f, #ee5f5b);
          background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bd362f), to(#ee5f5b));
          background-image: -webkit-linear-gradient(top, #bd362f, #ee5f5b);
          background-image: -o-linear-gradient(top, #bd362f, #ee5f5b);
          background-image: linear-gradient(to bottom, #bd362f, #ee5f5b);
          background-repeat: repeat-x;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbd362f', endColorstr='#ffee5f5b', GradientType=0);
          border-color: #ee5f5b #ee5f5b #e51d18;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
          *background-color: #ee5f5b;
          filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
          &:hover,
          &:focus,
          &:active,
          &.active,
          &.disabled,
          &[disabled] {
              color: #fff;
              background-color: #ee5f5b;
              *background-color: #ec4844;
          }
          &:active,
          &.active {
              background-color: #e9322d \9;
          }
      }
  }
}
.has-switch {
  display: inline-block;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  position: relative;
  text-align: left;
  overflow: hidden;
  line-height: 8px;
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  min-width: 100px;
}
.has-switch.size-MINI {
  min-width: 72px;
}
.has-switch.size-S {
  min-width: 80px;
}
.has-switch.size-L {
  min-width: 120px;
}
.has-switch.deactivate {
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: default !important;
}
.has-switch.deactivate label,
.has-switch.deactivate span {
  cursor: default !important;
}
.has-switch > div {
  display: inline-block;
  width: 150%;
  position: relative;
  top: 0;
}
.has-switch > div.switch-animate {
  transition: left 0.5s;
}
.has-switch > div.switch-off {
  left: -50%;
}
.has-switch > div.switch-on {
  left: 0;
}
.has-switch input[type=checkbox] {
  display: none;
}
.has-switch span,
.has-switch label {
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  padding-top: 4px;
  font-size: 14px;
  line-height: 20px;
}
.has-switch span.size-MINI,
.has-switch label.size-MINI {
  padding-bottom: 4px;
  padding-top: 4px;
  font-size: 10px;
  line-height: 9px;
}
.has-switch span.size-S,
.has-switch label.size-S {
  padding-bottom: 3px;
  padding-top: 3px;
  font-size: 12px;
  line-height: 18px;
}
.has-switch span.size-L,
.has-switch label.size-L {
  padding-bottom: 9px;
  padding-top: 9px;
  font-size: 16px;
  line-height: normal;
}
.has-switch label {
  text-align: center;
  margin-top: -1px;
  margin-bottom: -1px;
  z-index: 100;
  width: 34%;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #f5f5f5;
  background-image: linear-gradient(to bottom, #fff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffffff", endColorstr="#ffe6e6e6", GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #e6e6e6;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch label:hover, .has-switch label:focus, .has-switch label:active, .has-switch label.active, .has-switch label.disabled, .has-switch label[disabled] {
  color: #fff;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
}
.has-switch label:active, .has-switch label.active {
  background-color: #ccc \9 ;
}
.has-switch label i {
  color: #000;
  text-shadow: 0 1px 0 #fff;
  line-height: 18px;
  pointer-events: none;
}
.has-switch span {
  text-align: center;
  z-index: 1;
  width: 33%;
}
.has-switch span.switch-left {
  -ms-border-radius-topleft: 4px;
  border-top-left-radius: 4px;
  -ms-border-radius-bottomleft: 4px;
  border-bottom-left-radius: 4px;
}
.has-switch span.switch-right {
  color: #333;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  background-color: #f0f0f0;
  background-image: linear-gradient(to bottom, #e6e6e6, #fff);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffe6e6e6", endColorstr="#ffffffff", GradientType=0);
  border-color: #fff #fff #d9d9d9;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #fff;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-right:hover, .has-switch span.switch-right:focus, .has-switch span.switch-right:active, .has-switch span.switch-right.active, .has-switch span.switch-right.disabled, .has-switch span.switch-right[disabled] {
  color: #333;
  background-color: #fff;
  *background-color: #f2f2f2;
}
.has-switch span.switch-right:active, .has-switch span.switch-right.active {
  background-color: #e6e6e6 \9 ;
}
.has-switch span.switch-primary, .has-switch span.switch-left {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #005fcc;
  background-image: linear-gradient(to bottom, #04c, #08c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0044cc", endColorstr="#ff0088cc", GradientType=0);
  border-color: #08c #08c #005580;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #08c;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-primary:hover, .has-switch span.switch-primary:focus, .has-switch span.switch-primary:active, .has-switch span.switch-primary.active, .has-switch span.switch-primary.disabled, .has-switch span.switch-primary[disabled], .has-switch span.switch-left:hover, .has-switch span.switch-left:focus, .has-switch span.switch-left:active, .has-switch span.switch-left.active, .has-switch span.switch-left.disabled, .has-switch span.switch-left[disabled] {
  color: #fff;
  background-color: #08c;
  *background-color: #0077b3;
}
.has-switch span.switch-primary:active, .has-switch span.switch-primary.active, .has-switch span.switch-left:active, .has-switch span.switch-left.active {
  background-color: #069 \9 ;
}
.has-switch span.switch-info {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #41a7c5;
  background-image: linear-gradient(to bottom, #2f96b4, #5bc0de);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff2f96b4", endColorstr="#ff5bc0de", GradientType=0);
  border-color: #5bc0de #5bc0de #28a1c5;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #5bc0de;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-info:hover, .has-switch span.switch-info:focus, .has-switch span.switch-info:active, .has-switch span.switch-info.active, .has-switch span.switch-info.disabled, .has-switch span.switch-info[disabled] {
  color: #fff;
  background-color: #5bc0de;
  *background-color: #46b8da;
}
.has-switch span.switch-info:active, .has-switch span.switch-info.active {
  background-color: #31b0d5 \9 ;
}
.has-switch span.switch-success {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #58b058;
  background-image: linear-gradient(to bottom, #51a351, #62c462);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff51a351", endColorstr="#ff62c462", GradientType=0);
  border-color: #62c462 #62c462 #3b9e3b;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #62c462;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-success:hover, .has-switch span.switch-success:focus, .has-switch span.switch-success:active, .has-switch span.switch-success.active, .has-switch span.switch-success.disabled, .has-switch span.switch-success[disabled] {
  color: #fff;
  background-color: #62c462;
  *background-color: #4fbd4f;
}
.has-switch span.switch-success:active, .has-switch span.switch-success.active {
  background-color: #42b142 \9 ;
}
.has-switch span.switch-warning {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #f9a123;
  background-image: linear-gradient(to bottom, #f89406, #fbb450);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff89406", endColorstr="#fffbb450", GradientType=0);
  border-color: #fbb450 #fbb450 #f89406;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #fbb450;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-warning:hover, .has-switch span.switch-warning:focus, .has-switch span.switch-warning:active, .has-switch span.switch-warning.active, .has-switch span.switch-warning.disabled, .has-switch span.switch-warning[disabled] {
  color: #fff;
  background-color: #fbb450;
  *background-color: #faa937;
}
.has-switch span.switch-warning:active, .has-switch span.switch-warning.active {
  background-color: #fa9f1e \9 ;
}
.has-switch span.switch-danger {
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #d14641;
  background-image: linear-gradient(to bottom, #bd362f, #ee5f5b);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffbd362f", endColorstr="#ffee5f5b", GradientType=0);
  border-color: #ee5f5b #ee5f5b #e51d18;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #ee5f5b;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.has-switch span.switch-danger:hover, .has-switch span.switch-danger:focus, .has-switch span.switch-danger:active, .has-switch span.switch-danger.active, .has-switch span.switch-danger.disabled, .has-switch span.switch-danger[disabled] {
  color: #fff;
  background-color: #ee5f5b;
  *background-color: #ec4844;
}
.has-switch span.switch-danger:active, .has-switch span.switch-danger.active {
  background-color: #e9322d \9 ;
}

3.4.4 select 下拉框

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

原生效果

原生美化方式：

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

HTML SCSS CSS 
<span class="hui-select-box">
  <select class="hui-select" size="1" name="demo1">
    <option value="" selected>默认select</option>
    <option value="1">菜单一</option>
    <option value="2">菜单二</option>
    <option value="3">菜单三</option>
  </select>
</span>
/* 方法一、修改源生 */
.hui-select {
  border: solid 1px #ddd;
  box-sizing: border-box;
  cursor: pointer;
  line-height: normal;
  font-weight: normal;
  width: 100%;
  white-space: nowrap;
  font-size: 14px;
}
.hui-select-box {
  border: solid 1px #ddd;
  box-sizing: border-box;
  vertical-align: middle;
  width: 100%;
  display: inline-block;
  padding: 4px 5px;
  .hui-select {
    border: none;
  }
  &.inline,
  &.inline .select {
    width: auto;
  }
  &.size-M {
    padding: 4px 5px;
    .hui-select {
      font-size: 14px;
    }
  }
  &.size-MINI {
    padding: 0px 5px;
    .hui-select {
      font-size: 12px;
    }
  }
  &.size-S {
    padding: 3px 5px;
    .hui-select {
      font-size: 12px;
    }
  }
  &.size-L {
    padding: 8px 5px;
    .hui-select {
      font-size: 16px;
    }
  }
  &.size-XL {
    padding: 10px 5px;
    .hui-select {
      font-size: 18px;
    }
  }
}

@media (max-width: 767px) {
  .responsive{
    .hui-select-box {
      border: none;
    }
    .hui-select-box .hui-select,
    .select {
      border: solid 1px #ddd;
      padding: 10px;
      font-size: 16px;
    }
    .hui-select-box,
    .hui-select-box.size-M,
    .hui-select-box.size-MINI,
    .hui-select-box.size-S,
    .hui-select-box.size-L,
    .hui-select-box.size-XL {
      height: auto;
      padding: 0;
    }
  }
}
/* 方法二、JS模拟 */
.hui-select-wrapper {
  position: relative;
  display: inline-block;
  font-size: 14px;
  cursor: default
}

.hui-select-default {
  zoom: 1;
  display: block;
  padding-left: 10px;
  padding-right: 30px;
  background-color: #fff;
  border: solid 1px #d0d0d0;
  height: 34px;
  line-height: 34px;
}

.jsselect.radius {
  overflow: visible;
  .select-default {
    @include borderRadius(4px);
  }
  .select-list {
    @include borderRadius(4px);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

.select-icon {
  position: absolute;
  height: 8px;
  width: 12px;
  right: 10px;
  top: 50%;
  margin-top: -4px;
  background: url(../images/jselect/iconpic-arrow-down2.png) no-repeat center
}

.unselectable {
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1;
  line-height: 34px;
  max-height: 320px;
  overflow: auto;
  background-color: #fff;
  background-clip: padding-box;
  @include boxShadow(0 1px 2px rgba(0, 1, 1, 0.2));
  box-sizing: border-box;
  border: solid 1px #d0d0d0;
  .select-item {
    margin: 0;
    padding: 0;
    .selected {
      background-color: #148cf1;
      color: #fff;
    }
  }
  .select-option {
    background: #fff;
    line-height: 34px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
    padding: 0 10px;
  }
}

/* 方法一、修改源生 */
  .hui-select {
    border: solid 1px #ddd;
    box-sizing: border-box;
    cursor: pointer;
    line-height: normal;
    font-weight: normal;
    width: 100%;
    white-space: nowrap;
    font-size: 14px;
  }
  
  .hui-select-box {
    border: solid 1px #ddd;
    box-sizing: border-box;
    vertical-align: middle;
    width: 100%;
    display: inline-block;
    padding: 4px 5px;
  }
  .hui-select-box .hui-select {
    border: none;
  }
  .hui-select-box.inline, .hui-select-box.inline .select {
    width: auto;
  }
  .hui-select-box.size-M {
    padding: 4px 5px;
  }
  .hui-select-box.size-M .hui-select {
    font-size: 14px;
  }
  .hui-select-box.size-MINI {
    padding: 0px 5px;
  }
  .hui-select-box.size-MINI .hui-select {
    font-size: 12px;
  }
  .hui-select-box.size-S {
    padding: 3px 5px;
  }
  .hui-select-box.size-S .hui-select {
    font-size: 12px;
  }
  .hui-select-box.size-L {
    padding: 8px 5px;
  }
  .hui-select-box.size-L .hui-select {
    font-size: 16px;
  }
  .hui-select-box.size-XL {
    padding: 10px 5px;
  }
  .hui-select-box.size-XL .hui-select {
    font-size: 18px;
  }
  
  @media (max-width: 767px) {
    .responsive .hui-select-box {
      border: none;
    }
    .responsive .hui-select-box .hui-select,
  .responsive .select {
      border: solid 1px #ddd;
      padding: 10px;
      font-size: 16px;
    }
    .responsive .hui-select-box,
  .responsive .hui-select-box.size-M,
  .responsive .hui-select-box.size-MINI,
  .responsive .hui-select-box.size-S,
  .responsive .hui-select-box.size-L,
  .responsive .hui-select-box.size-XL {
      height: auto;
      padding: 0;
    }
  }
  /* 方法二、JS模拟 */
  .hui-select-wrapper {
    position: relative;
    display: inline-block;
    font-size: 14px;
    cursor: default;
  }
  
  .hui-select-default {
    zoom: 1;
    display: block;
    padding-left: 10px;
    padding-right: 30px;
    background-color: #fff;
    border: solid 1px #d0d0d0;
    height: 34px;
    line-height: 34px;
  }
  
  .jsselect.radius {
    overflow: visible;
  }
  .jsselect.radius .select-default {
    border-radius: 4px;
  }
  .jsselect.radius .select-list {
    border-radius: 4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  
  .select-icon {
    position: absolute;
    height: 8px;
    width: 12px;
    right: 10px;
    top: 50%;
    margin-top: -4px;
    background: url(../images/jselect/iconpic-arrow-down2.png) no-repeat center;
  }
  
  .unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .select-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1;
    line-height: 34px;
    max-height: 320px;
    overflow: auto;
    background-color: #fff;
    background-clip: padding-box;
    box-shadow: 0 1px 2px rgba(0, 1, 1, 0.2);
    box-sizing: border-box;
    border: solid 1px #d0d0d0;
  }
  .select-list .select-item {
    margin: 0;
    padding: 0;
  }
  .select-list .select-item .selected {
    background-color: #148cf1;
    color: #fff;
  }
  .select-list .select-option {
    background: #fff;
    line-height: 34px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
    padding: 0 10px;
  }

3.4.5 input-file 文件上传

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

原生效果

上传按钮

浏览文件

带文本框

浏览文件

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

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

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

.hui-upload {
  position: relative;
  display: inline-block;
  height: 31px;
  *display: inline;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  .upload-url {
    cursor: pointer;
    width: 300px;
  }
  .input-file {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 1;
    font-size: 30em;
    opacity: 0;
    filter: alpha(opacity=0)
  }
  .icon-add,
  .icon-minus {
    cursor: pointer;
    display: inline-block;
    font-family: Arial;
    font-size: 30px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    vertical-align: middle;
    width: 36px
  }
}

.hui-form-group .upload-btn {
  margin-left: -1px
}

@media (max-width: 767px) {
  .upload-btn {
    display: none;
  }
  .upload-url {
    display: none;
  }
}
.hui-upload {
  position: relative;
  display: inline-block;
  height: 31px;
  *display: inline;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
}
.hui-upload .upload-url {
  cursor: pointer;
  width: 300px;
}
.hui-upload .input-file {
  position: absolute;
  right: 0;
  top: 0;
  cursor: pointer;
  z-index: 1;
  font-size: 30em;
  opacity: 0;
  filter: alpha(opacity=0);
}
.hui-upload .icon-add,
.hui-upload .icon-minus {
  cursor: pointer;
  display: inline-block;
  font-family: Arial;
  font-size: 30px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  vertical-align: middle;
  width: 36px;
}

.hui-form-group .upload-btn {
  margin-left: -1px;
}

@media (max-width: 767px) {
  .upload-btn {
    display: none;
  }

  .upload-url {
    display: none;
  }
}

3.4.6 数字输入框

SCSS CSS JS 
.hui-input-number {
  display: block;
  overflow: hidden;
  width: 100px;
  position: relative;
  padding-left: 29px;
  padding-right: 29px;
  .hui-input-text {
      height: 30px;
      text-align: center;
      width: 100%
  }
  a {
      display: inline-block;
      position: absolute;
      top: 0;
      bottom: 0;
      height: 28px;
      line-height: 28px;
      width: 28px;
      cursor: pointer;
      outline: 0;
      text-decoration: none;
      text-align: center;
      font-size: 16px;
      border: 1px solid #ddd;
      background-color: #f7f7f7;
      &:hover {
        text-decoration: none
      }
      i {
        font-style: normal;
      }
      &.decrease {
        left: 0
      }
      &.add {
        right: 0
      }
      &.add.disabled,
      &.decrease.disabled {
        color: #999;
        cursor: not-allowed
      }
  }
}
.hui-input-number {
  display: block;
  overflow: hidden;
  width: 100px;
  position: relative;
  padding-left: 29px;
  padding-right: 29px;
}
.hui-input-number .hui-input-text {
  height: 30px;
  text-align: center;
  width: 100%;
}
.hui-input-number a {
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 28px;
  line-height: 28px;
  width: 28px;
  cursor: pointer;
  outline: 0;
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  border: 1px solid #ddd;
  background-color: #f7f7f7;
}
.hui-input-number a:hover {
  text-decoration: none;
}
.hui-input-number a i {
  font-style: normal;
}
.hui-input-number a.decrease {
  left: 0;
}
.hui-input-number a.add {
  right: 0;
}
.hui-input-number a.add.disabled, .hui-input-number a.decrease.disabled {
  color: #999;
  cursor: not-allowed;
}
$("#Huispinner-demo1").Huispinner(
  {
    value:3,
    minValue:5,
    maxValue:99,
    dis:1,
  },
  function(){
    alert("回调");
  }
)

相关参数

属性 默认值 描述 备注
value 1 文本框默认值
minValue 1 最小值
maxValue 999 最大值
dis 1 每一步增量

3.4.7 邮箱提示

SCSS CSS 
.emailSug-wrapper {
  position: absolute;
  background: #fff;
  text-align: left;
  .emailSug-list .emailSug-item {
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding-left: 10px;
    color: #333;
    &.active {
      background: #5a98de;
      cursor: pointer;
      color: #fff;
    }
  }
}
.emailSug-wrapper {
  position: absolute;
  background: #fff;
  text-align: left;
}
.emailSug-wrapper .emailSug-list .emailSug-item {
  font-size: 14px;
  height: 25px;
  line-height: 25px;
  padding-left: 10px;
  color: #333;
}
.emailSug-wrapper .emailSug-list .emailSug-item.active {
  background: #5a98de;
  cursor: pointer;
  color: #fff;
}

3.4.8 表单布局

表单布局
浏览文件

3.4.9 表单验证 jQuery.Validate.js

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。更重要的是他是由jQuery 团队、 jQuery UI 团队的主要开发人员Jörn Zaefferer 编写和维护的。具体我们可以访问 jQuery Validate 官网，下载最新版的 jQuery Validate 插件。

点击查看具体使用方法。

豫ICP备19019279号-1
H-ui只是一个纯web前端的程序，没有后台和数据库，也不提供任何系统代运营服务。所有使用H-ui开发的任何系统版权都归开发者所有，造成的任何损失、不良影响，H-ui均不承担任何法律责任。
未经允许，禁止转载、抄袭、镜像
用心做站，做不一样的站