JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<input disabled value="text">
<input disabled class="fake" value="text">

CSS

.disabledWrap {position: relative;}
.fakeDisabled {color: red; border: 1px solid #bbb; cursor: default; position: relative;}

JavaScript

$('input.fake:disabled').each(function(i, el) {
    var $el = $(el),
        $clone = $('<div class="fakeDisabled">'),
        $wrap = $('<span class="disabledWrap">');
    
    $el.wrap($wrap);
    $clone.css({
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'width': $el.width(),
        'height': $el.height()
    })
    .html($el.val())
    .appendTo($wrap);
});