The autofill pseudo-class for CSS matches input elements which have been autofilled by the user agent. It stops matching if the user edits the autofilled field.
Autofill information must be saved on the browser for it to appear in the input field.
selector:autofill
{
property: value;
}
<!doctype html>
<html>
<head>
<style>
input
{
border-color: lightgray;
border-style: solid;
border-width: 10px;
margin: 10px;
outline-color: transparent;
outline-style: solid;
outline-width: 10px;
}
input:autofill
{
border-color: var(--myvar1);
outline-color: var(--myvar2);
}
</style>
</head>
<body>
<button>initial</button>
<button value="lightblue blue">value</button><br>
<form>
<label for="myid1">PHONE</label>
<input autocomplete="tel" id="myid1" type="tel">
<label for="myid2">EMAIL</label>
<input autocomplete="email" id="myid2" type="email">
</form>
<script>
function myfunction(myparameter)
{
const mytarget = myparameter.target;
const myproperty = mytarget.value || mytarget.innerHTML;
let myvalue1 = myvalue2 = myproperty;
if(myproperty.indexOf(" "))
{
const myvalue = myproperty.split(" ");
myvalue1 = myvalue[0];
myvalue2 = myvalue[1];
}
const mystyle = document.querySelector(":root").style;
mystyle.setProperty("--myvar1", myvalue1);
mystyle.setProperty("--myvar2", myvalue2);
}
for(const mybutton of document.querySelectorAll("button"))
{
mybutton.addEventListener("mouseover", myfunction);
}
</script>
</body>
</html>