时间戳

首页 > 解决方案 > 如何隐藏显示在色样字段上的文本标签？

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

问题描述

我遇到了这个奇怪的故障，在某些浏览器上，我的颜色样本上出现了一个文本标签（显示它的名称）。这是一个屏幕录像来检查它。看到发生的事情后，很容易理解出了什么问题。对为什么它在色样上显示标签感到困惑。任何帮助将非常感激。这是我用来显示颜色样本的代码。

$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;
}
 }

标签： css

解决方案

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

 text-indent: -2000px;

还要确保您的元素/标签不是内联的，如果您可以分享此页面的实时 url，我们可以检查并给出更准确的答案。

推荐阅读