Make text invisible in contenteditable - html

Question

I have a contenteditable span (display set to inline-block, so it doesn't act like a span, per se). I want the span to act like a password field on a linux terminal; you're typing, but you can't actually see it.
I've tried visibility: hidden and display: none, but both break the formatting and the text is still visible. Setting the color to the same as the background (black) makes the text invisible, but the caret is too.
I'd prefer for this to be done with CSS, but if it can't be done, I'll just use JavaScript. Here's my code:
.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> </span></span>
</div>

Answer 1

You can change the caret color so that the caret is shown:
.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> </span></span>
</div>

Answer 2

Two CSS properties:
color: rgba(0,0,0,0);
caret-color: red;
One CSS pseudo-element:
::-moz-selection { background: rgba(0, 0, 0, 0); }
::selection { background: rgba(0, 0, 0, 0); }
The caret needs a contrasting color so adjust accordingly with caret-color. The value rgba(0,0,0,0) is transparent black -- the fourth 0 is alpha (opacity). The selection highlight is the same color so if the user selects the text with the default color (blue in Chrome) the text would be not be revealed. Note, this will work with any color background.
.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>