Question

我有一个可编辑内容的跨度（显示设置为inline-block，所以它的作用不像跨度，本身）。我希望跨度像Linux终端上的密码字段一样工作；您正在输入，但实际上不能看到。

我尝试过visibility: hidden和display: none，但是两者都破坏了格式并且文本仍然可见。将颜色设置为与背景相同（黑色）会使文本不可见，但插入符号也是如此。

我希望使用CSS完成此操作，但是如果无法完成，我将仅使用JavaScript。这是我的代码：

.input {
    display: inline;
}

body {
    background-color: black;
}

#field-in {
    color: #ffffff;
    outline: none;
    display: inline-block;
}

<div class="input">
    <span id="field"><span id="field-name">Invisible Text:</span><span id="field-in" contenteditable>&nbsp;</span></span>
</div>

Answer 1

您可以更改插入标记的颜色，以便显示插入标记：

.input {
    display: inline;
}
body {
    background-color: black;
    color: white;
}
#field-in {
    color: #000000;
    caret-color: #ffffff;
    outline: none;
    display: inline-block;
}
#field-in::selection, #field-in::-moz-selection {
    color: #000000;
    background-color: #000000;
}

<div class="input">
    <span id="field"><span id="field-name">Invisible Text:</span><span id="field-in" contenteditable>&nbsp;</span></span>
</div>

Answer 2

两个CSS属性：

color: rgba(0,0,0,0);
caret-color: red;

一个CSS伪元素：

::-moz-selection { background: rgba(0, 0, 0, 0); } ::selection { background: rgba(0, 0, 0, 0); }

插入符需要对比的颜色，因此请用caret-color进行相应的调整。值rgba(0,0,0,0)是透明的黑色-第四个0是alpha（不透明度）。选择突出显示的颜色是相同的颜色，因此，如果用户选择默认颜色的文本（Chrome中为蓝色），则不会显示该文本。请注意，这将适用于任何彩色背景。

.input {
  display: inline-block;
}

body {
  background-color: none;
}

#field-in {
  outline: none;
  color: rgba(0, 0, 0, 0);
  caret-color: red;
  display: inline-block;
}

#field-in::-moz-selection {
  background: rgba(0, 0, 0, 0);
}

#field-in::selection {
  background: rgba(0, 0, 0, 0);
}

<div class="input">
  <span id="field"><span id="field-name">Invisible Text:</span><span id="field-in" contenteditable>Test</span></span>
</div>

使文字在内容中不可见

2 个答案: