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