css - 自定义范围按钮不显示图标
问题描述
我正在尝试向我的自定义滑块添加一个按钮。这是一个小提琴。
这是我的CSS:
input[type="range"] {
width: 100%;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EDF1F0), to(#F6F8F7));
-webkit-appearance: none;
border-radius: 10px;
padding: 5px;
transition: opacity 0.5s;
position: relative;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
content: '>';
border-radius: 50%;
background: lightgray;
z-index: 1;
width: 50px;
position: relative;
height: 50px;
}
input[type="range"]:before {
content: "Modtag penge";
color: #8a8a8a;
position: absolute;
left: 36%;
top: 20px;
z-index: 1;
font-size: 16px;
}
input[type="range"]::-webkit-slider-thumb:before {
position: absolute;
left: 5px;
top: -10px;
z-index: 1;
font-size: 56px;
font-weight: bold;
content: "→";
background: url('https://cdn2.iconfinder.com/data/icons/arrows-1-2/380/Arrow_Right2-512.png');
}
<input #unlock type="range" class="slideToUnlock" value="0" max="100" (touchend)="checkUnlock($event)" (mouseout)="checkUnlock($event)">
解决方案
除了我的评论之外,您还可以使用多个背景来保持圆形按钮:
input[type="range"] {
width: 100%;
background: linear-gradient(to bottom, #EDF1F0, #F6F8F7);
-webkit-appearance: none;
border-radius: 10px;
padding: 5px;
outline:none;
position: relative;
box-sizing:border-box;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%;
background:
url('https://cdn2.iconfinder.com/data/icons/arrows-1-2/380/Arrow_Right2-512.png') center/contain no-repeat content-box,
lightgray;
z-index: 1;
width: 50px;
position: relative;
height: 50px;
padding:5px; /* Offset the background image from the edges */
}
input[type="range"]:before {
content: "Modtag penge";
color: #8a8a8a;
position: absolute;
left: 36%;
top: 20px;
font-size: 16px;
}
<input #unlock type="range" class="slideToUnlock" value="0" max="100" (touchend)="checkUnlock($event)" (mouseout)="checkUnlock($event)">
推荐阅读
- r - 如何通过分隔符分割数据框
- swift - 如何快速获取日期
- python - 如何在 Pandas 上获取每列值的最后 5 行(放弃前的 5 个操作)
- powershell - 发送退出代码而不退出脚本
- python - Django 管理员 CheckboxSelectMultiple 小部件不适用于 ManyToManyField
- java - 在 Xamarin.Forms 中使用有线 USB 扫描仪的代码
- java - 尝试生成将存储在 s3 上并立即作为自动电子邮件附件检索的 pdf 表
- excel - 为什么我的脚本在这个 True/False 上停止匹配两个值?
- vba - 写入文本文件,RTL 字符串已损坏?
- mysql - 在 Wix 嵌入式 MySql 上运行 Liquibase