Chrome浏览器的设备模式下HTML5滑块消失

Question

这可能只是一个Chrome浏览器的错误，但我还没有发现它在任何地方提及，所以我们走吧。

我正在做一个简单的练习，作为JavaScript30.com练习的一部分。练习使用一些HTML5范围输入来通过javascript更新CSS变量。

我注意到，当我在响应显示模式下使用Chrome开发人员工具时，范围输入从页面中消失。检查它们显示它们实际上在DOM中，但它们的高度已被设置为0px。 CSS中没有任何东西可以看作是罪魁祸首，如果我退出响应式显示模式，输入按预期显示。

这是一个与Chrome的工具怪癖或有一些CSS来防止这种？

精简码如下。

:root { 
 
    --base: #f7c235; 
 
    --spacing: 10px; 
 
    --blur: 10px; 
 
} 
 

 
img { 
 
    padding: var(--spacing); 
 
    background: var(--base); 
 
    filter: blur(var(--blur)); 
 
} 
 

 
.highlight { 
 
    color: var(--base); 
 
} 
 

 
body { 
 
    text-align: center; 
 
    background: #193549; 
 
    color: white; 
 
    font-family: 'helvetica neue', sans-serif; 
 
    font-weight: 100; 
 
    font-size: 50px; 
 
} 
 

 
.controls { 
 
    margin-bottom: 50px; 
 
} 
 

 
.controls input { 
 
    width: 12rem; 
 
    min-height: 2rem; 
 
}

<div class="controls"> 
 
    <label for="spacing">Spacing:</label> 
 
    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px"> 
 

 
    <label for="blur">Blur:</label> 
 
    <input type="range" name="blur" min="10" max="25" value="10" data-sizing="px"> 
 

 
    <label for="base">Base Color</label> 
 
    <input type="color" name="base" value="#f7c235"> 
 

 
</div>

Answer 1

我相信铬禁用响应模式的花式。下面的CSS规则将让它重新出现：

input[type=range] { 
 
    -webkit-appearance: none; 
 
    background: transparent; 
 
} 
 
input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    background: #fff; 
 
    height: 18px; 
 
    width: 18px; 
 
    margin-top: -8px; 
 
    border-radius: 99px; 
 
} 
 
input[type=range]::-webkit-slider-runnable-track { 
 
    width: 300px; 
 
    height: 4px; 
 
    background: #ddd; 
 
}