html5新表单类型样式修改

HTMl5新增表单元素样式的修改，其中range类型的表单元素可以使用一个在线编辑网站来搞定，网址请戳这里：range.css

<style type="text/css">
    input[type=range].rge1 {
        -webkit-appearance: none;
        width: 100%;
        margin: 13.8px 0;
    }
    
    input[type=range].rge1:focus {
        outline: none;
    }
    
    input[type=range].rge1::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: #3071a9;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }
    
    input[type=range].rge1::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: #ffffff;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -14px;
    }
    
    input[type=range].rge1:focus::-webkit-slider-runnable-track {
        background: #72a8d7;
    }
    
    input[type=range].rge1::-moz-range-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: #3071a9;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }
    
    input[type=range].rge1::-moz-range-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: #ffffff;
        cursor: pointer;
    }
    
    input[type=range].rge1::-ms-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        color: transparent;
    }
    
    input[type=range].rge1::-ms-fill-lower {
        background: #173752;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    
    input[type=range].rge1::-ms-fill-upper {
        background: #3071a9;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }
    
    input[type=range].rge1::-ms-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: #ffffff;
        cursor: pointer;
        height: 8.4px;
    }
    
    input[type=range].rge1:focus::-ms-fill-lower {
        background: #3071a9;
    }
    
    input[type=range].rge1:focus::-ms-fill-upper {
        background: #72a8d7;
    }
    
    .deal::-webkit-textfield-decoration-container {
        background-color: #f0f3f9;
    }
    
    .deal::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    
    .deal::-webkit-outer-spin-button {
        -webkit-appearance: none;
        /* 有无看不出差别 */
    }
    
    ::-webkit-datetime-edit {
        padding: 1px;
        background: url(/study/image/selection.gif);
    }
    
    ::-webkit-datetime-edit-fields-wrapper {
        background-color: #eee;
    }
    
    ::-webkit-datetime-edit-text {
        color: #4D90FE;
        padding: 0 .3em;
    }
    
    ::-webkit-datetime-edit-year-field {
        color: purple;
    }
    
    ::-webkit-datetime-edit-month-field {
        color: blue;
    }
    
    ::-webkit-datetime-edit-day-field {
        color: green;
    }
    
    ::-webkit-inner-spin-button {
        visibility: hidden;
    }
    
    ::-webkit-calendar-picker-indicator {
        border: 1px solid #ccc;
        border-radius: 2px;
        box-shadow: inset 0 1px #fff, 0 1px #eee;
        background-color: #eee;
        background-image: -webkit-linear-gradient(top, #f0f0f0, #e6e6e6);
        color: #666;
    }
    </style>
<p>
        <input type="range" class="rge1" min="1" max="1000" step="1">
    </p>
    <p>默认：
        <input type="number" />
        <br>
        <br> 处理：
        <input type="number" class="deal" />
    </p>
    <p>
        日期：<input type="date">
    </p>