Disabled inputs in bootstrap. How to apply it to a different TAG?

Lorraine Bernard picture Lorraine Bernard · Oct 31, 2012 · Viewed 44.3k times · Source

By using disabled attribute on an input is possible to prevent user input and trigger a slightly different look.
Here is the demo http://jsfiddle.net/D2RLR/3023/

Let's suppose I want to apply the same style to a different TAG like a table.
In fact, I am using handsontable to generate an Excel-like data grid editor.
How can I apply disabled attribute in the following context (TAG like a table)?

Here is the demo using handsontable and bootstrap http://jsfiddle.net/D2RLR/3025/

Answer

Sara picture Sara · Oct 31, 2012

You can't apply Bootstrap's existing input[disabled] styling, but you can add new CSS that mimics the styles exactly.

For example:

#exampleGrid td {
    cursor: not-allowed;
    background-color: #EEE;
    color: #9E9999;
}

Obviously this doesn't include your readonly logic, and looks a little weird with your fiddle (because the column and row headers are the same color), but that's the gist of it.