input 内置属性 样式更改 总结

目录

1. input placeholder 提示文字 样式更改

2. input radio 单选框 样式更改

3. input checkbox 复选框 样式更改

4. input type=number 调控数字的按钮 样式更改

---

1. input placeholder 提示文字 样式更改

• WebKit / Blink / Edge —— ::-webkit-input-placeholder { color: #fff; }
• IE（10/11）—— :-ms-input-placeholder { color: #fff; }
• Firefox（4-18） —— :-moz-placeholder { color: #fff; }
• Firefox（19+） —— ::-moz-placeholder { color: #fff; }

• ---

  注意：更改 IE 中 placeholder 的样式，需要引入兼容性代码

<script>
  $(function () {
    // 判断浏览器是否支持 placeholder 不支持则执行自定义代码
    if (!placeholderSupport()) {
      $("[placeholder]")
        .focus(function () {
          var input = $(this);
          // 获取焦点之后，type 属性修改为密码框，如果没有密码框，此处判断可以删除
          if (input[0].id == "userPassword") {
            input.prop("type", "password");
          }
          if (input.val() == input.attr("placeholder")) {
            input.val("");
            input.removeClass("placeholder");
          }
        })
        .blur(function () {
          var input = $(this);
          if (input.val() == "" || input.val() == input.attr("placeholder")) {
            // 将所有 input 置为文本框，主要为了重置密码框
            input.prop("type", "text");
            input.addClass("placeholder");
            input.val(input.attr("placeholder"));
          } else {
            // 密码框填写密码后密码后恢复密码框
            if (input[0].id == "userPassword") {
              input.prop("type", "password");
            }
          }
        })
        .blur();
    }
  });
  // 判断 placeholder 属性是否可以使用的方法
  function placeholderSupport() {
    return "placeholder" in document.createElement("input");
  }
</script>

---

2. input radio 单选框 样式更改

• 

<label> 选中单选框 </label>
<input type="radio" checked name="danxuan" value="选中单选框" />

<label> 未选中单选框 </label>
<input type="radio" name="danxuan" value="未选中单选框" />

<style>
  /* 隐藏原有的 radio */
  input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }
  input[type="radio"] + label::before {
    /* 不换行空格 */
    content: "\a0";
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    width: 14px;
    height: 14px;
    margin-right: 2px;
    margin-top: -4px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #c6cbd0;
  }
  /* 添加颜色 */
  input[type="radio"]:checked + label::before {
    background-color: #28a7ff;
    border: 1px solid #28a7ff;
    background-clip: content-box;
    padding: 2px;
  }
</style>

---

3. input checkbox 复选框 样式更改

• 

<label> 选中复选框 </label>
<input type="checkbox" checked name="复选框选中" />

<label> 未选中复选框 </label>
<input type="checkbox" name="复选框未选中" />

<style>
  input[type="checkbox"] {
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    border-radius: 2px;
    background: #e2e2e2;
    margin-right: 2px;
    outline: none;
    -webkit-appearance: none;
  }
  /* 定义复选框选中的样式 */
  input[type="checkbox"]:checked {
    background: #028dfb no-repeat center;
  }
</style>

---

4. input type=number 调控数字的按钮 样式更改

• 
• 默认情况下，是有上图右侧的那种箭头按钮的，去除它的方法如下：

<input type="number">
 
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
			 
input[type="number"] {
    -moz-appearance: textfield;
}