1

I've got a text box that the user inputs a hex value for a colour. The text box will change colour to the hex value entered, however the problem is that if the input is a shade of black, or any dark colour, it is very difficult, or impossible to see what hex value has been entered. So I want the inputted text to have a different coloured outline, for example white so the user is clearly able to see what they have entered.

This is a part of my code:

<head>
    <style>
        #ColourInput { /* apply this style to element id="ColourInput" */
            left: 240px;
            top: 60px;
            width: 100px;
        }


        input[type=text]:focus {
          border: 3px solid #555;
    </style>
<script>
        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);
            }

        }

    </script>
</head>

            <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 will be appreciated

User0123456789
  • 760
  • 2
  • 10
  • 25
  • 1
    Possible duplicate of [Outline effect to text](https://stackoverflow.com/questions/4919076/outline-effect-to-text) – showdev Mar 14 '19 at 21:28
  • 1
    This might help https://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color – Hamed Mar 14 '19 at 21:43
  • 1
    The code doesn't work, any extra libraries we should know about? If you could add more code, or at least a link to a repl or something, that would be great! – Jodast Mar 14 '19 at 22:01
  • @showdev Hi, I don't think that those "duplicate" questions would work in this case as this is words that the user types into the textbox. So as the user is typing stuff in the textbox, instead of just a back text showing in the textbox, I want an outlined text showing inside the box – User0123456789 Mar 15 '19 at 16:02
  • Not like [this](https://jsfiddle.net/fs9p8zhq/)? Maybe I'm misunderstanding. I prefer the method suggested by @Hamed, rather than an outline. – showdev Mar 15 '19 at 17:49
  • Oops, looks like I linked to the same post twice. The second one was intended to be [CSS Font Border](https://stackoverflow.com/questions/2570972/css-font-border). – showdev Mar 15 '19 at 17:49

0 Answers0