Question

i create css code like

.inputHide {
    font-size       : 100px;
    width           : 100px;
    height          : 100px;
    border          : none;
    background      : transparent;
    readonly        : true;
}

But it does not work. Although if i use font-size of 1px then by using tab i can access that textbox & can change it’s value.

Is there any way to make textbox readonly just using css..

Answer 1

I agree with rowland but you can set it uneditable with:

.inputHide {
    display: none;
}

although this takes it out of the flow (so there is a noticable movement of elements to fill the void your textbox left).

This method makes it completely invisible and uneditable… not just visible and greyed out (like HTML “disabled” or “readonly” attributes would do).