改变输入值的颜色

Question

I have login script where are inputs email and password. Email input value is set "email" but when It's not correct i added a script which change value to "email not correct" but i wanted it have color red. Code below do not work. How do i change it?

<input id="email" type="text" name="logemail" placeholder="Email">


echo '<span class=\'wrong\'>
      <script>
      document.getElementById("email").value = "incorrect email";
      </script>
      </span>';

CSS:

.wrong{
color:red;
}

Answer 1

Your CSS changes the value of text in the span element not the input value of the text box. Technically speaking, your current code only changes the colour of the "innerHTML" of the span element not the "value" of the input element.

Change

.wrong{
    color:red;
}

To

#email{
    color:red;
}

To get the desired behaviour...

Answer 2

Use separate javascript function to add class dynamically.

<script>
    function addClass(element, myClass) {
        element.className += ' ' + myClass;
}
</script>
<span class='wrong1'>
    <script>
        document.getElementById("email").value = "incorrect email";
        var foo = document.getElementById('email');
        addClass(foo, 'wrong');
    </script>
</span>