Наброски ввода текста пользователем в текстовое поле

Question

У меня есть эта программа, в которой пользователь вводит шестнадцатеричное значение в текстовое поле , и после нажатия кнопки отправки само текстовое поле меняется на цвет, который представляет шестнадцатеричное значение.У меня проблема в том, что когда пользователь вводит темный цвет, такой как #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>

Любая помощь будет признательна

Answer 1

Я добавил белую тень вокруг черного текста.Это очень похоже на то, как субтитры делаются на телевидении.Я проверил с черного на черный, и вы можете отрегулировать цвет в фрагменте кода, чтобы он работал на зеленом, желтом, синем и т. Д.

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


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

<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>