在文本框中大纲用户文本输入

我有一个程序,用户在其中输入一个十六进制值到 文本框 一旦按下submit按钮,文本框本身就会变为十六进制值表示的颜色。我遇到的问题是,当用户输入一种深色时,例如 #000000 ,文本将无法看到。

为了解决这个问题,我想创建一个浅色的文本轮廓,这样用户就可以看到他们在框中键入的内容。

有人建议我用 text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px; 在css中,但这不符合我的意愿。我不能使用jquery或任何类似的东西,只能使用纯javascript、html和css。

这是我的代码:

#ColourInput { /* apply this style to element id="ColourInput" */
    left: 240px;
    top: 60px;
    width: 100px;
    height: 20px;
    text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}


input[type=text]:focus {
  border: 3px solid #555;
}


function fnCustomColour() {
    var sHexValue = document.getElementById("ColourInput").value;
    var ValueValid = 0
    fnDebugMessage(sHexValue);

    if (/[0-9A-F]{6}$/i.test(sHexValue)) {

        if (sHexValue.indexOf("#") === 0) {

        } else {
            sHexValue = "#"+sHexValue 
        }
        ValueValid = 1

    } else {
        alert("Value not allowed");
        ValueValid = 0
    }

    if (ValueValid = 1) {
        ColourInput.style.backgroundColor = sHexValue;
        fnSetFillColour(sHexValue);
        fnDebugMessage(sHexValue);
    }

}

<div id="CustomColour">
    Custom Colour Input: #<input type="text" id="ColourInput" name="CustomColour" placeholder="Enter Hex Value" pattern="[a-fA-F0-9]{8}$/i"><br>
    <input type="submit" onclick="fnCustomColour();" id="ColourSubmit" value="Submit">
</div>

任何帮助都将不胜感激