JSFiddle - React, Tailwind, and code Playground

by goldfingerxyz

HTML

<body style="background-color:#999;font-size:12px;">
    <div style="width:500px; height:500px; margin:30px auto; background-color:#9CC">
        <input id="Test" type='text' placeholder='Hello how are you' style="width:270px;" />
    </div>
</body>

CSS

::-webkit-input-placeholder {
   color: red;
    font-size: 16px !important;
    margin=0;
    padding=0;
    font-family:Arial, Helvetica, sans-serif;
}

:-moz-placeholder { /* Firefox 18- */

    font-size: 16px !important;
        margin=0;
    padding=0;
    font-family:Arial, Helvetica, sans-serif;
}

::-moz-placeholder {  /* Firefox 19+ */
  
    font-size: 16px !important;
        margin=0;
    padding=0;
    font-family:Arial, Helvetica, sans-serif;
}

:-ms-input-placeholder {  
  
    font-size: 16px !important;
        margin=0;
    padding=0;
    font-family:Arial, Helvetica, sans-serif;
}
span{font-size: 16px !important;font-family:Arial, Helvetica, sans-serif;}

JavaScript

var _$tmpSpan = $('<span/>').html($('#Test').attr('placeholder')).css({
    position: 'absolute',
    left: -99999,
    top: -9999
}).appendTo('body'),
    textWidth = _$tmpSpan.width();
_$tmpSpan.remove();
alert(textWidth);