我真的不明白为什么我无法用我自己的照片替换原来的星形手柄。让我们依靠那个plunker来理解。我就此问题阅读了author's documentation:例10
在我之前的那个龙头上,我写道:
HTML:
<input id="ex10" type="text" data-slider-handle="custom"/>
CSS:
.slider-handle.custom {
background: transparent url("http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/128/Accept-icon.png");
}
网址背景链接到我想看到的图片处理。 (替换默认星号)。
亚历山大评论的新图片如下:似乎没有任何改变。
改变这个:
.slider-handle.custom::before {
line-height: 20px;
font-size: 20px;
content: '\2605';
color: #726204;
}
对此:
.slider-handle.custom::before {
line-height: 20px;
font-size: 20px;
content: "url-of-your-picture";
color: #726204;
}
您可能需要对行高进行一些调整,具体取决于您要使用的自定义句柄的大小。
因此,如果您实例化了滑块,那么您需要做的就是更改CSS
.slider-handle.custom {
background: transparent none;
/* Add your background image */
background-image: url("http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/128/Accept-icon.png");
background-size: contain;
}
/* Or display content like unicode characters or fontawesome icons */
.slider-handle.custom::before {
line-height: 20px;
font-size: 20px;
/* Comment this because you will not use star */
/*content: '\2605'; /*unicode star character*/
color: #726204;*/
}
你应该覆盖slider-handle.custom :: before
.slider-handle.custom::before {
display:none
}