有没有人在IE11的输入范围控件上有任何体验样式和控制ms-thumb伪元素的行为?
如果控件高于拇指伪元素,则在拖动后拇指会粘在顶部,并且不会返回到原始位置。
.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;
}
答案 0 :(得分:0)
尝试将拇指的上下边距设置为拇指高度与控制高度之差的一半。