CODEWITHSUNDEEP
htmlformstextbox
katiemarlowe
katiemarlowe

Reputation: 11

Change color of text while typing in HTML textbox?

I have a set of text input boxes and right now while typing in them, the text being typed doesn't show up. Once a different part of the page is clicked, the text shows up, but not while the user is actually typing. Does anyone know what might be causing this?

<form method="post" action="/contact" >
    <ul class="contact">
      <li>
        <label for="name">Name</label>
        {{ contact | contact_input: 'name' }}
      </li>
      <li>
        <label for="email">Email</label>
        {{ contact | contact_input: 'email' }}
      </li>
      <li>
        <label for="subject">Subject</label>
        {{ contact | contact_input: 'subject' }}
      </li>
      <li>
        <label for="message">Message</label>
        {{ contact | contact_input: 'message' }}
      </li>
      <li>
        <label for="captcha">Spam check</label>
        <div>
          {{ contact | contact_input: 'captcha' }}
          <div class="captcha_image">{{ contact.captcha }}</div>
          <span>Please enter the characters from the image.</span>
        </div>
      </li>
    </ul>
    <button type="submit" name="submit" tabindex="6" title="Send us an email">Send</button>
  </form>

Upvotes: 1

Views: 7266

Answers (3)

Manjunath s k
Manjunath s k

Reputation: 38

Can you check the CSS class contact styling and change the text color with focus.it will show up the text while typing.

Upvotes: 0

smuhero
smuhero

Reputation: 19

Hi you can simply use javascript to change the color like this.

<script> 
    function textboxFocus(x) 
    {  
        document.getElementById(x).style.color = "green";  
    } 
    function textboxBlur(x) 
    {    
        document.getElementById(x).style.color = "black"; 
    } 
</script>

<input id="em" type="text" name="Email" placeholder="Email" onclick="textboxFocus(this.id);" onblur="textboxBlur(this.id);" size="40"/>

Upvotes: 0

Sukrit Gupta
Sukrit Gupta

Reputation: 448

You may try CSS like:

ul.contact > li > input:focus{
color:black;
}

Hope It helps!

Upvotes: 2

Related Questions