Question

我有一个奇怪的故障，在某些浏览器上，我的色板上出现了一个文本标签（显示它的名称）。 Here's a screen recording进行检查。在看到发生了什么之后很容易理解出了什么问题。为何在颜色样本上显示标签感到困惑。任何帮助将非常感激。这是我用来显示色样的代码。

$colors: ( 
 'color-Dark\ Grey\ Heather'     #3E3C3D, 
 'color-Heather\ Deep\ Teal'     #426275,
 'color-Heather\ True\ Royal'    #5F98E6,
);

@each $color in $colors {
 $colorName: nth($color, 1);
 $bgColor:   nth($color, 2);

#ProductSelect-option-#{$colorName} + label {
 background-color: $bgColor;
 color: $bgColor;
 width: 35px;
 height: 35px;
 overflow: hidden;
 border-radius: 25px;
 margin: 5px;
 text-indent: 100%;
 white-space: nowrap;

@if $colorName == Dark\ Grey\ Heather' or $colorName == 'color- 
  Heather\ Deep\ Teal' or $colorName == 'color-Heather\ True\ Royal {
  background-image: url(my-heather-swatch-goes-here.png);
  background-repeat: no-repeat;
  background-size: 35px 35px;
}
 }

#ProductSelect-option-#{$colorName}:checked + label {
 border-color: #555;
 border-width: 3px;
}
 }

Answer 1

问题在于文本缩进，它应该隐藏文本，例如，尝试将文本缩进从100％更改为-2000px。

 text-indent: -2000px;

还请确保您的元素/标签不是内联的，如果您可以共享此页面的实时网址，我们可以对其进行检查并给出更准确的答案。

如何隐藏显示在色样字段上的文本标签？

1 个答案: