Style and Ensure AutoFill Data Is Correct

Short Break from ReactJS. About me, I come from a non-traditional Computer Science background, am an activist and advocate fighting for diversity and inclusion in the technology space. I blog about technical topics related to front-end development, JavaScript, ReactJS and socio-political topics such as tech inclusion.

Browser Stop Messing With MY Form!!

How do you keep your browser’s autofill from inputting the wrong data and styles into your forms? You can insert a value into the name attribute in your form’s input. Basically, add your value to your name attribute

name: nameKey

You can also over ride the browser’s autofill styles.

/* Change Autocomplete styles in Chrome*/input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focusinput:-webkit-autofill,textarea:-webkit-autofill,textarea:-webkit-autofill:hovertextarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus {border: 1px solid green;-webkit-text-fill-color: green;-webkit-box-shadow: 0 0 0px 1000px #000 inset;transition: background-color 5000s ease-in-out 0s;}