Disable text box without style changing?

Question

How can you disable an HTML text box without having the browser change the visual appearance of the textbox?

We disable with JQuery: $(".datepick").attr('readonly', 'readonly');

Works fine but in Firefox the text box appears with a grey background and a thick border. We want to prevent this from happening.

Reason we are doing this is to make a JQuery date picker text box read only (so the user has to use the calendar popup area).

Answer 1

You could do it by blurring the text input on focus:

$('.datepick').focus(function(){
    this.blur();
});

Alternatively, you could just disable text entry in the input:

$('.datepick').keydown(function(e){
    e.preventDefault();
});

Answer 2

If you want to override the styling for a disabled input box, explicitly set the styling for an input text box like so:

input[type=text] {
  color: #000;
  background-color: #fff;
}
/* alternatively you could add textarea to this as well */

additionally you could set a css class like 'disabled' whenever you set the input to disabled and use a disabled css style like so:

input[type=text].disabled {
  /* disabled styling goes here */
}

and then have some code like this:

$(some_input).attr('disabled', 'disabled');
$(some_input).addClass('disabled');

and to reenable the field you could try something like:

$(some_input).removeAttr('disabled');
$(some_input).removeClass('disabled');