0

Can this be done via CSS3 ?

var inputs = document.getElementsByTagName("INPUT");
for (var i = 0; i < inputs.length; i++)
{
    if (inputs[i].type == "text")
    {
        if (inputs[i].value != "")
        {
            inputs[i].style.borderBottomColor = '#448aff';
        }
    }
}

var textareas = document.getElementsByTagName("TEXTAREA");
for (var i = 0; i < textareas.length; i++)
{
    if (textareas[i].value != "")
    {
        textareas[i].style.borderBottomColor = '#448aff';
    }
}

I don't mind not supporting even IE10.

anjanesh
  • 3,771
  • 7
  • 44
  • 58
  • 2
    As mentioned in this [thread](http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css-on-a-page-i-am-visiting-and-do-no), CSS can't do this. – Ar4i Jul 28 '16 at 12:28

1 Answers1

1
textarea:valid,
input:valid {
    border-bottom-color: #448aff;
}

Also need to add pattern=".*?\S.*" (only valid with at least one non-space character) and required attributes to get thos pseudo-classes. You will probably also want to customise the :invalid state, too.

Walf
  • 8,535
  • 2
  • 44
  • 59
  • In regards to input, it's always "empty" or unrelated to that sort of :empty (empty tags, with an opening and a closing tag and no text in-between, not even whitespace => [your code works neither in Firefox nor in Chrome](http://codepen.io/PhilippeVay/pen/OXEqEg?editors=1000) – FelipeAls Jul 28 '16 at 13:29
  • @felipeals How about now? (I'm on my phone.) – Walf Jul 28 '16 at 14:31