javascript - 如何更改进度条样式?
问题描述
我想更改html中进度条的默认样式,基本上我需要将渐变颜色更改为进度条并增加高度和宽度
#progressBar {
background-color: #bd4f6c !important;
background-image: linear-gradient(326deg, #bd4f6c 0%, #d7816a 74%) !important;
border-radius: 10px;
}
<form id="upload_form" action="final.php" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1" onchange="show_pro();">
<div id="text"></div>
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <span id="status">
</span>
<p id="loaded_n_total"></p>
<input type="submit" name="sub">
</form>
解决方案
尝试使用background-image
. 本文中的更多详细信息
progress,
progress[value]::-webkit-progress-bar {
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress,
progress[value]::-webkit-progress-value {
background-image: #C02425;
background-image: linear-gradient(to right, #F0CB35, #C02425);
}
<div>
0% progress
<progress id="progressBar1" value="0" max="100" style="width:300px;"></progress>
</div>
<div>
10% progress
<progress id="progressBar2" value="10" max="100" style="width:300px;"></progress>
</div>
推荐阅读
- python - ImportError:未为 f2py 加载库
- javascript - 输入类型=“隐藏”或显示:无
- r - ggmap 和空间绘图 - 奇怪的绘图
- javascript - 向 HTML Canvas 元素中的像素添加事件侦听器
- xcode - 无法使用超过 2 个 ForEach 语句构建 SwiftUI
- visual-studio-code - 键绑定“不接受值”(1.40 更新后)
- jquery - Rails:jQuery-ui-Slider-Pips:错误:滑块小部件实例没有这样的方法'pips'
- r - 我不能在 R 的其他函数中使用函数吗?
- python - 使用 RequestHandler.set_secure_cookie() 的龙卷风不允许添加 samesite 属性
- c - 为什么在linux系统调用实现中需要“asmlinkage”?