Textbox css with info

Question

I want 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 ??

Answer 1

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.

Answer 2

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"

Answer 3

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;
}