如何制作一个html＆amp; css可点击进度条

Question

如何制作这样的可点击进度条（image）？

当我点击该部分时，我想选择进度条的一部分！

Answer 1

进度跟踪器的许多实现依赖于图像的外观。使用图像显然有效，但它确实存在一些问题。

<强>性能即可。当网页包含图像时，Web浏览器必须向Web服务器发出单独的请求以检索这些图像。这些请求需要时间，并且可能会降低页面的性能。

<强>质量即可。在高分辨率显示器（例如Apple的Retina）上，标准分辨率图像看起来很糟糕。有一些技术可以将图像调整到高分辨率显示器，但需要花费时间，精力和编程来实现。

流畅布局。流体布局要求Web内容动态适应浏览器窗口的宽度。如果页面包含图像，则它必须缩放图像（这可能会降低其质量），裁剪图像（修改内容），或更改图像内容与文本的相对比例（这可能会不利地改变页面和＃39 ; s的外观和感觉）。

注意：标准进度跟踪器可能不适合必须支持小屏幕设备的完全响应式设计。如果任务有足够的步骤来保证进度跟踪器，那么这些步骤可能不适合小型显示器上的标准水平方向跟踪器。

<强> Tracking progress reference

Answer 2

您可以使用一些输入无线电，​​：checked pseudoclass和sibling（〜）selector。

您可以在此处查看：http://codepen.io/anon/pen/gpBExG

技巧是input[type='radio']:checked ~ .checker

这是一个不完整的例子，但我实现了主逻辑。您应该使用图像创建更好的UI。