用css或js美化表单

前端在做开发的时候，难免会遇到要美化表单的时候，最常见的就是设计稿做的跟默认的样式完全不一样，我们需要通过css或者js来实现设计稿的效果，我个人简称为美化表单。
下面是我工作中的例子，不一定会是美化表单的，但是都跟表单有关系，这里先写些简单的例子，后面遇到了再慢慢补充。

美化radio input type="radio"

下面是直接使用CSS来实现的方式：
html代码：

<div class="radio-panel radio-style">
    <span class="radio-panel-title">封面</span>
    <label>
         <input type="radio" name="cover" value="单图">单图
         <span class="radio-box"></span>
    </label>
    <label>
           <input type="radio" name="cover" value="三图" checked>三图
           <span class="radio-box"></span>
    </label>
    <label>
           <input type="radio" name="cover" value="自动">自动
           <span class="radio-box"></span>
           <a href="javascript:void (0);" class="msg-icon"></a>
           <span class="msg-content" style="display: none;">系统会从正文中随机挑选图片作为封面图进行展示</span>
  </label>
</div>

sass代码

.radio-style {
    label {
      position: relative;
      display: inline-block;
      cursor: pointer;
      .radio-box {
        position: absolute;
        left: -2px;
        top: -2px;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 55%;
        background: $white;
        border: 1px solid #b1b1b1;
      }
      input[type="radio"]:checked + .radio-box {
        width: 20px;
        height: 20px;
        background: $white url("./../img/checked.png") no-repeat top center;
        background-size: 100% 100%;
        border: 0;
      }

      .msg-content {
        position: absolute;
        left: 50%;
        top: -49px;
        margin-left: -137px;
        display: block;
        width: 340px;
        height: 28px;
        line-height: 28px;
        text-align: center;
        font-size: 14px;
        border: 1px solid $normalRed;
        background: #f5f5f5;
        border-radius: 3px;
        &:before {
          content: '';
          position: absolute;
          left: 50%;
          bottom: -17px;
          display: block;
          margin-left: -9px;
          width: 17px;
          height: 17px;
          background: url("./../img/triangle-red2.png") no-repeat top center;
        }
      }
    }
  }
  .msg-icon {
    margin-left: 5px;
    margin-top: -4px;
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    background: url("./../img/msg-icon.png") no-repeat top center;
  }
  .msg-icon:hover {
    background: url("./../img/msg-icon-red.png") no-repeat top center;
  }

另外，这个例子中还有一个鼠标移上去在图标上方显示提示文字的需求，用了一点js，我这里用的是jQuery来实现的，在下面的代码上面别忘了引入jQuery。具体代码看下面：

    // 发表文章的时候，封面处选择自动的时候显示提示
    $(function () {
        $('.msg-icon').hover(function () {
            $('.msg-content').show();
        }, function () {
            $('.msg-content').hide();
        });
    });

隐藏select下拉列表右边默认的箭头

select {
    -webkit-appearance: none; /* Firefox */
    -moz-appearance: none; /* Safari 和 Chrome */
    appearance: none;
}

修改select文字颜色

    $(function () {
      $("select").change(function () {
        $(this).css("color", "#000");
      })
    });