Е-поштом смо добили лепи савет од Лидије Дагер са методом за промену стилова које прегледачи ВебКит примењују на поља обрасца која су аутоматски довршена.
Шта подразумевамо под самодовршавањем
Многи прегледачи (укључујући Цхроме и Сафари) пружају поставку која омогућава корисницима да аутоматски попуњавају детаље за уобичајена поља обрасца. То сте видели приликом попуњавања обрасца који тражи ствари попут имена, адресе и е-поште.
Закључак је у томе што су корисници морали да омогуће ово подешавање да би овај исечак био ефикасан. Ако је поставка омогућена, тада ће прегледачи ВебКит за корисника стилизовати поља која је аутоматски попунио, на следећи начин:
Приметите како аутоматски довршена поља имају жуту позадину? То је оно на шта мислимо и што ћемо променити са овим исечком.
Тхе Сниппет
Можемо користити -webkit-autofillпсеудо-селектор до циља те области и стил њих као што видимо одговара. Подразумевани стил утиче само на боју позадине, али овде се примењује већина других својстава, попут borderи font-size. Можемо чак и да променимо боју текста користећи -webkit-text-fill-colorкоји је укључен у доњи исечак.
/* Change Autocomplete styles in Chrome*/ 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 ( 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; )Демо
Погледајте стилове аутоматског довршавања оловке у ВебКит-у од ЦСС-Трицкс (@ цсс-трицкс) на ЦодеПен-у.