2

IE11 の入力範囲コントロールで ms-thumb 疑似要素の動作をスタイリングおよび制御した経験のある人はいますか?

コントロールが親指の疑似要素よりも高い場合、親指はドラッグ後に上部にくっつき、元の位置に戻りません。

これは、codepen と使用されている css での動作の例です (IE11 または Project Spartan/Edge が必要です)。

.c-slider{
  height: 60px;
  background-color: #99CCFF;
  padding:0px;
}

/*Slider Specific Styling*/

input[type=range]::-ms-thumb {
  width: 30px;
  height:7px;
  border:1px solid #0066CC;
  background-color:#0066CC;
  cursor:pointer;
}

input[type=range]::-ms-thumb:active{
  background-color:green;
}

input[type=range]::-ms-thumb:hover{        
    height: 60px;
    width: 30px;    
}

input[type=range]::-ms-fill-lower {
    background: #A1A1A1;
}

input[type=range]::-ms-fill-upper {
     background: #EBF5FF;
}


/*Slider Reset Css*/
input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: 100%; /* Specific width is required for Firefox. */
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}


input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;
    background: transparent; /* Hides the slider so custom styles can be added */
    border-color: transparent;
    color: transparent;
}
4

1 に答える 1

0

サムの上下の余白を、サムの高さとコントロールの高さの差の半分に設定してみてください。

于 2016-04-06T01:45:29.880 に答える