如何调试据称正在应用但在页面上不可见的样式？

Posted 2023-02-19

【中文标题】如何调试据称正在应用但在页面上不可见的样式？

【英文标题】：How to debug styling supposedly being applied but not visible on the page?

【发布时间】：2022-01-22 19:02:35

【问题描述】：

我一直在尝试为表单输入应用一些样式，但有点难过。

我一直在尝试将以下样式应用于我的表单输入，它按预期显示在 Google Devtools 中，但 page 上没有出现任何样式。

我已经试过了：

使用类或 id 'selectedFile' 应用样式以增加特异性。 使用焦点对其应用相同的样式，或者只是正常显示它，没有样式出现，但它总是出现在 devTools 中，说它已应用。 添加一个高 z-index（不漂亮，但理论上如果在其他页面元素后面应用样式，它会将它带到页面的前面） - 没有乐趣。 完全删除轮廓偏移，将其设置为负数（显示在框内）和正数（显示在框外），没有任何乐趣。

任何想法我错过了什么？？？

input[type="file"]:focus-visible 
    z-index: 9999999 !important;
    outline-style: solid !important;
    outline-width: 4px !important;
    outline-color: blue !important;
    outline-offset: -4px !important;

<div class="col-12 col-lg-6">
  <div class="input-group mb-3">
    <div class="custom-file">
      <input type="file" class="custom-file-input pointer" id="selectedFile" (change)="fileChange($event)" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
      <label class="custom-file-label" for="selectedFile">selectedFileName | async</label>
    </div>
    <div class="input-group-append">
      <button class="btn btn-primary" type="button" (click)="uploadFile()">Upload</button>
    </div>
  </div>
</div>

【问题讨论】：

如果我使用 TAB 键将焦点设置在 FILE 元素上，则代码 sn-p 工作正常。使用键盘导航是应该激活:focus-visible 的方式之一，请参阅css-tricks.com/almanac/selectors/f/focus-visible。请注意，在代码 sn-p（而不是 $primary）中使用诸如 red 之类的实际颜色会更好。

嗨@PeterB，好点。颜色对不起。我现在已经改变了。令人沮丧的是，它在代码 sn-p 中有效，但在我的实际代码中无效。我包含了指向我的 devTools 屏幕截图的链接以及未设置样式的框以向您展示，但我无法解决。

如果您 (1) 单击 FILE 元素，(2) 关闭文件浏览弹出窗口，(3) 按 Tab，然后按 Shift-Tab（将焦点从和返回到元素）？

@PeterB 按照您提供的说明，应用了焦点样式，我相信这是浏览器的默认样式，但我没有写任何内容。我也很难找到这种样式甚至来自 css 的地方。

为您的帮助干杯 @PeterB ！感谢您的宝贵时间

【参考方案1】：

显然，文件输入的样式是出了名的困难，有时可能有点繁琐。

碰巧我在这里找到了解决方法： https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

我需要做的就是在我的样式中添加一个+ label，现在它可以工作了（参见here）。

input[type="file"]:focus-visible + label 
z-index: 9999999 !important;
outline-style: solid !important;
outline-width: 4px !important;
outline-color: blue !important;
outline-offset: 2px !important;