html - 如何让 slider 悬停成一个圆圈并摆脱 slider 上方形成的线？-6ren

html - 如何让 slider 悬停成一个圆圈并摆脱 slider 上方形成的线？

转载作者：行者123 更新时间：2023-11-28 14:06:03

25

4

我目前有一个带悬停的 slider ，但是有没有办法让悬停变成一个在所有浏览器中都显示为圆的圆圈？还有一种方法可以将 slider 的形状从矩形更改为直线吗？我还尝试删除 slider 上方出现的随机线，但似乎无法删除它，是否有明显的我遗漏的东西？

谢谢!

#container {
  padding: 300px 500px;
}

#frequencySlider {
  margin-top: 1px;
  width: 100%;
}

#frequencyLabel {
  margin-top: 1px;
}

#toggleAudio {
  padding: 10px 20px;
  height: center;
  width: center;
  font-size: 15px;
  background: #939393;
  color: white;
  opacity: 0.7;
}


/* Slider */

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: #908e8e;
  opacity: 0.2;
  -webkit-transition: .3s;
  transition: opacity .3s;
}

.slider:hover {}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 20px;
  background: #0b38b4;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 12px;
  height: 20px;
  background: #0b38b4;
  cursor: pointer;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div id="container">

    <button id="toggleAudio">
      Click Here
    </button>
    <hr>
    <input type="range" min="100" max="4000" value="2000" step="1" class="slider" id="frequencySlider">
    <br>
    <p id="frequencyLabel">Frequency: 2000 Hz</p>
  </div>
</body>

</html>

最佳答案

也适用于 IE11 -> full example

#frequencySlider {
  margin-top: 1px;
  width: 100%;
}

#frequencyLabel {
  margin-top: 1px;
}

#toggleAudio {
  padding: 10px 20px;
  height: center;
  width: center;
  font-size: 15px;
  background: #939393;
  color: white;
  opacity: 0.7;
}


/* Slider */

input[type=range] {
  width: 100%;
  height: 25px;
  margin: 10px 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #f00;
  border-radius: 1px;
  border: 0px solid #000;
  color: transparent;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #f00;
  border-radius: 1px;
  border: 0px solid #000;
  color: transparent;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  background: #f00;
  border-radius: 1px;
  border: 0px solid #000;
  color: transparent;
}

input[type=range]::-moz-range-thumb {
  border: 1px solid #000;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: rgb(33, 150, 243);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-top: -7px;
}

input[type=range]::-ms-thumb {
  border: 1px solid #000;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: rgb(33, 150, 243);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-top: -7px;
}

input[type=range]::-webkit-slider-thumb {
  border: 1px solid #000;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: rgb(33, 150, 243);
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-top: -7px;
}


/* fix for IE11 */

input[type=range]::-ms-thumb {
  height: 15px;
  width: 15px;
  margin-top: 0;
  background: rgb(33, 150, 243);
}

<div id="container">
  <button id="toggleAudio">
      Click Here
    </button>

  <label id="range" class="range">
      <input type="range" min="100" max="4000" value="2000" step="1" id="frequencySlider">
    </label>
  <br>
  <p id="frequencyLabel">Frequency: 2000 Hz</p>
</div>

关于html - 如何让 slider 悬停成一个圆圈并摆脱 slider 上方形成的线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57223364/

25

4

0

文章推荐： javascript - jquery 将内容移动到其他 div

文章推荐： html - Bootstrap - 菜单下拉菜单下推内容

c++ - 提供显式演绎指南是否会禁用隐式演绎指南的生成/形成
我正在阅读 deduction guides在 C++17 中。假设我们有以下示例: template struct Custom { }; template struct Person {
Xamarin 形成 TabbedPage
我在我的 xamarin 表单项目中使用选项卡式页面。我正在尝试在 Android 的 MyTabsRenderer 类中使用 OnTabReselected 事件。但不会调用 OnTabSelect
ios - 形成 NSPredicate
我对 NSPredicate 有疑问。想不出一种写法，也找不到类似的东西。我有这个谓词: [NSPredicate predicateWithFormat:@"followedBy.username
javascript - 形成 PreventDefault 然后再次激活不起作用
我的模态中有一个小表单，如下所示: Name
javascript - 形成 jquery 插件中的所有输入访问
我正在尝试制作用于表单验证的 jquery 插件(用于学习)。在此表单中，我无法获取类名称为“required”的所有表单字段。代码如下: (function( $ ) { $.fn.kValidat
mysql - 形成 SQL 查询
在我的 Android 应用中，我从 Google Place API 获取附近餐馆的列表。但不幸的是，这个列表没有给出餐厅的菜单。我有 T_RESTAURANT 和 T_MENU 表。假设我在
javascript - 形成 Angular Action
我正在尝试使用 angular.js 和 devise 设置登录。这是我的表单 html: Email Password
javascript - 形成 html 谷歌脚本
谁能告诉我如何让生成的文档从表单中提取数据并将其作为标题？我已经查看了 Google Script 文档，但到目前为止我还没有找到任何可以回答我或向我展示类似示例的内容。到目前为止，我在这里找到了相关
html - 形成 html Action
当我有这样的表格时: “.”是什么意思？在行动中代表什么？最佳答案 action 属性告诉表单将表单数据发布到哪里。 . 代表当前目录，所以我会说这是发布到当前目录中的默认文档。相对路径有几
java - 形成 Mockito "grammars"
Mockito 似乎是一个非常漂亮的 Java stub /模拟框架。唯一的问题是我找不到任何关于使用他们的 API 的最佳方式的具体文档。测试中常用的方法包括: doXXX(???) : Stubb
winforms - 形成 Dispose() 或 Close()
我有 2 份表格。我从一种形式创建并展示了另一种形式。效果很好。但是，当我尝试从创建该表单的表单中关闭或处理该表单时，出现以下异常: Exception : Value Dispose() can
Xamarin 形成 AppIcon.xcassets 导致上传错误。
将我的应用程序上传到 TestFlight 时出现以下错误。但是，我没有看到 missing 的任何位置Xamarin Assets 菜单中的图标。 (76x76、167x167 和 152x152
python - 如何使用 slug 形成 url
我的models.py文件看起来像这样 from django.db import models from django.template.defaultfilters import slugify
c# - Xamarin 形成 UWP 缺失电话调用管理程序集
问题学习 Xamarin 大学类(class) XAM120 .在将我的 IDial 实现添加到我的 UWP 项目时遇到障碍。出于某种原因，我的项目没有在我的系统上使用 PhoneCallManag
android - Xamarin 形成 RelativeLayout 使用
我在应用程序的列表页面上使用了 FloatingActionButton，我还想添加一个 searchBar。但我无法向他们展示该页面。我的代码和屏幕截图已关闭。如何显示搜索栏？ FAB Github
ios - 如何正确配置/形成 NSFetchedResultsController 请求以包含多对多关系？
实体产品和类别之间存在经典的多对多关系，其中一个产品可能包含在多个类别中。我们想在 UI 中使用带有 UITableViewController 或 UICollectionView 的 NSFetc
javascript - 使用 javascript 形成 "action"
html 代码: js代码: function show(){ $.ajax({
html - 长字符串干扰 div 对齐/形成
我有一个用户列表。现在任何一个名字很长的用户都在搞乱排列/排列。我认为通过为名称设置大小可以达到目的: .invitee .name{ height: 50px; width: 115px;
python - 使用 Flask 形成 CSS
我正在使用 Flask 框架和 WTforms 库，我在更改选择字段中每个选项的颜色时遇到了问题，因为它总是显示为黑色而不是红色我在模板中有下一个表单
python - Django 形成 HTML5 验证模式
Dugen Chen 写了一篇有用的文章，介绍如何将 HTML5 验证中的“required”属性添加到 Django 表单字段。 http://duganchen.ca/elegantly-addi

首页

博学

6Ren·AI

商城

html - 如何让 slider 悬停成一个圆圈并摆脱 slider 上方形成的线？