Crizly Crizly - 3 months ago 10x
Javascript Question

Make HTML Input Area Readonly but Selectable

I've got an input area that's transparent and when you click on it the glowing border shows up (intended) and you can edit the text. I'm trying to get the glowing border to still show up when you click it but make the text inside uneditable.

<input style='border:none; background:none;' value='TEXT'>

makes the input act like an uneditable div, you can't double click the input area to select it all and the glowing border doesn't show up. How can I retain the input functionality without allowing the text to be changed?


You can use the readonly attribute with some CSS:

input:focus {
    box-shadow: 0 0 2px 2px #3d94db;
<input style='border:none; background:none;' value='TEXT' readonly>