Textbox css with info

I w开发者_运维问答ant to create a textbox for the username But once he starts typing i need a small image with the requirements of username to be displayed dynamically ..

can anyone help me ??

Lets say A1 is your text box and X1 is your image:

<script>
    function txtChange(){
        a1=document.getElementById(a1);
        x1=document.getElementById(x1);
        if(a1.value.length>0) {
           x1.style['display'] = true;
        }
    }
</script>


protected void Page_Load(object sender, EventArgs e)
{
    a1.Attributes["onchange"] = "txtChange()";
}

Oh and I guess it's worth mentioning if you want it just when they focus (click on it) not when they add text you can change "onchange" to "onfocus"

You can use the :focus psuedo class on the textbox to add styling when the box has focus.

You cannot do what you are asking without javascript though.

Depending on the location of the image, can you do something like this:

html

<input class="my_textbox"><img src=""/>

and then, using ":focus" and css sibling selector:

css

input.my_textbox + img {
  display:none;
}
input.my_textbox:focus + img {
  display:block;
}