Outline user text input in textbox

Question

I've got this program where the user enters a hex value into a textbox and once the submit button is pressed, the textbox itself changes to the colour that the hex value represents. The problem I have is that when the user enters a dark colour such as #000000, the text becomes impossible to see.

So to counter this problem I want to create a text outline of a lighter colour so the user is able to see what they have typed in the box.

I was suggested to use text-shadow: #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px; in CSS, but it doesn't work to how I would like it to. I can't use jQuery or anything of the sort, just pure Javascript, HTML and CSS.

This is my code:

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

Any help would be appreciated

if i understand correctly, your text is also black.. then adding a black shadow is not likely to make the text visible.. what about adding a white shadow or using complementary color for the text (https://stackoverflow.com/questions/1664140/js-function-to-calculate-complementary-colour) ? — gnetmil, Mar 15 '19 at 16:33
You can achieve that with shadow like that : `text-shadow: #FFF 2px 0px 0px, #FFF 1px 1px 2px, #FFF 0px 2px 1px;` — Sébastien Bousquet, Mar 15 '19 at 16:36
@Limteng yes that was my intention. Sorry I should have specified that in the question — User0123456789, Mar 15 '19 at 16:37
@User0123456789 someone has provided the method to create a white shadow, while it seems the white shadow makes the text hard to read... maybe try complementary color `0xffffff ^ color`.. — gnetmil, Mar 15 '19 at 20:42

score 2 · Accepted Answer · answered Mar 15 '19 at 18:47

I added a white shadow around the black text. This is much like how closed captioning is done on tv. I tested with black on black and you can adjust the color in the snippit to see it run on green, yellow, blue etc.

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

Outline user text input in textbox

1 Answers1