JSFiddle - React, Tailwind, and code Playground

by missingno

HTML

<input id="ta" type="text" value="My border changes :("></input>
<p> On Firefox, Go to Preferences->Content->Colors... and uncheck "Allow pages to use their own colors</p>

<button id="btn">Click here to update border calculation</button>

<p> Textarea border is <span id="res">...</span> </p>

CSS

input[type="text"] { border: 0px; }

span { text-decoration : underline; }

JavaScript

var ta = document.getElementById('ta');
var btn = document.getElementById('btn');
var res = document.getElementById('res');

function updateBorder(){
    res.innerHTML = ta.clientTop + 'px';
};

updateBorder();

btn.onclick = updateBorder;