chromiumAutofill.css

/* //////////////////////////
  > EXPERIMENTAL - idesmar
  ! BUGS: font color on auto-filled input not changing
  Needs more testing
 ////////////////////////// */


/* note: reset autofill in chromium */
/* cspell:disable */
/* > from user-agent stylesheet
! coud not unset or override
input:-internal-autofill-selected {
  appearance: menulist-button;
  background-image: none !important;
  background-color: -internal-light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important;
  color: fieldtext !important;
}
* reset succesful and available in TESTING
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: #434700 !important;
  color: #f4f2ee !important;
} */
/* cspell:enable */


/* > CSS Tricks
* https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
* https://codepen.io/team/css-tricks/pen/oxyJxR?editors=0100
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  --bg: #000000;
  --clr: #00ff00;
  border: 1px solid var(--clr);
  -webkit-text-fill-color: var(--clr);
  TEST: effects of box-shadow color change
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
} */

/* TESTING: Successful - on delaying effect of input background change */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  /* TEST: how to properly use */
  /* border: 1px solid; --- css tricks [color dependent on font color] */
  /* border: 1px solid inherit; --- color dependent on parent? */

  --border-clr: #008000;
  --font-clr: #008000;
  --bg-clr: #000000;

  border: 1px solid var(--border-clr);
  -webkit-text-fill-color: var(--font-clr);
  -webkit-box-shadow: 0 0 0px 1000px var(--bg-clr) inset;
  box-shadow: 0 0 0px 1000px var(--bg-clr) inset;
  transition: background-color 5000s ease-in-out 0s;

  /* invalid property value on dev tools */
  /* -webkit-box-shadow: 0 0 0px 1000px inherit inset;  */

  /* invalid property value on dev tools */
  /* box-shadow: 0 0 0px 1000px inherit inset; */

  /* * could not override/unset background-color in input:-internal-autofill-selected
    css tricks workaround     : longer transition-duration (5000s)
    dev preferred workaround  : longer transition-delay
  */
  /* transition: background-color 1s ease-in-out 50000s,
              color 1s ease-in-out 50000s; */
}