Use readonly attribute in <input> without changing the cursor

Question

If I have an <input> field with the readonly attribute, it still appears with the I-beam text cursor. Is there a way to stop that cursor from showing?

I cant use the disabled attribute because request.getParameter() does not work on disabled fields.

Answer 1

The idea of readonly elements is that you can still read and copy the text, just not edit them. That said, you can change the cursor using CSS attribute selectors. This example will match any input element with a readonly attribute:

input[readonly] {      cursor: pointer; } 

Answer 2

I did not want to override bootstrap's default styles so I came along with the following solution:

My LESS File:

input[readonly] {
    &.default-cursor {
        cursor: default;
    }
}

Or in CSS:

input[readonly].default-cursor {
    cursor: default;
}

My HTML:

<input type="text" class="form-control text-xl default-cursor" readonly>