2

Please consider me as a beginner of web developing. The problem is, when I turn autocomplete on in a <form></form> environment, the color of search box becomes white from black (perhaps it's set by flex I guess?). I am wondering is there any way to keep color unchanged.

<form autocomplete="on">
    <div style="display:flex;flex-direction:row">
        <label id="email" for="email" style="padding-right:5px">email:</label>
        <input id="email" type="email" name="email" style="flex:1" placeholder="e.g. aaa@bbb.com" />
        <button id="ack" type="submit">Submit</button>
    </div>
</form>

search box initial color: black (by flex?):
image color after autocompletion:
image

Ngorld
  • 856
  • 7
  • 17
Weizhi
  • 45
  • 8
  • 2
    Autocomplete highlighting may be done by the Browser, without you being able to do anything about it. – StackSlave Jul 15 '19 at 02:21
  • 1
    If you right click the element giving you trouble and select "Inspect", it will show you the exact styles being applied. My first guess would be that it's related to your browser. – Tyler Roper Jul 15 '19 at 02:21
  • 1
    Do you reset default styles? – El. Jul 15 '19 at 02:21
  • Maybe `autofill` browser default CSS. – Ngorld Jul 15 '19 at 02:21
  • @StackSlave There are workarounds, so I'm not sure I'd go as far as saying "You can't do anything about it". `background` in particular is a nasty one but you can employ some JavaScript (albeit ugly, admittedly) to circumvent it. – Tyler Roper Jul 15 '19 at 02:22
  • You guys are right, if I use IE browser, it doesn't change background color. Just to make it clear, there is no (simple) way to set this style in html / javascript code, is it correct? – Weizhi Jul 15 '19 at 02:35
  • @EI. I am not sure what function flex has. I do not reset other styles except for flex. – Weizhi Jul 15 '19 at 02:37
  • I found this selector using the dev tools in chrome: `input:-internal-autofill-selected` but I was unable to override it even with `background-color: white !important;`. It showed that the chrome specific styling was overridden but did not change the background colour to white. Try some of these perhaps: https://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css – mullac Jul 15 '19 at 04:35
  • related: https://stackoverflow.com/a/56837713/8620333 – Temani Afif Jul 15 '19 at 09:09

0 Answers0