title: Outline user text input in textbox
body: <p>I've got this program where the user enters a hex value into a <strong>textbox</strong> 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 <code>#000000</code>, the text becomes impossible to see.</p>
  
  <p>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. </p>
  
  <p>I was suggested to use <code>text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;</code> 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.</p>
  
  <p>This is my code:</p>
  
  <pre><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);
      }
  
  }
  
  &lt;div id="CustomColour"&gt;
      Custom Colour Input: #&lt;input type="text" id="ColourInput" name="CustomColour" placeholder="Enter Hex Value" pattern="[a-fA-F0-9]{8}$/i"&gt;&lt;br&gt;
      &lt;input type="submit" onclick="fnCustomColour();" id="ColourSubmit" value="Submit"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be appreciated</p>