크롬 자동 완성을위한 입력 배경 변경하기

나는 이미지를 사용하는 특정 배경을 가지고 있지만 크롬은 그것을 엉망으로 만듭니다. 색상을 변경하는 방법이 있지만 실제로 배경을 변경하고 싶지만 어떻게해야합니까?크롬 자동 완성을위한 입력 배경 변경하기

는 일반적으로는이

같다 : This is how it is normal

하지만 크롬의 자동 완성 내가이 CSS 코드가이

This is how it is with the autocomplete

처럼 얻는다으로

#email-field:-webkit-autofill, 
#pass-field:-webkit-autofill { 
    -webkit-box-shadow: 0 0 0px 1000px white inset; 
    background:#fff url(../../img/site/username.png) no-repeat 12px center;   
}

배경 immage 여전히 표시되지 않습니다. 배경은 흰색이고 "-webkit-box"앞에 "background : #fff ....."를 넣으려고했지만 여전히 작동하지 않습니다. HTML 코드는 laravel에서, :

<li>{{ Form::email('email', '', array('placeholder' => 'E-mail')) }}</li> 
    <li>{{ Form::password('password', array('placeholder' => 'Password')) }}</li>

그래서 질문은, 어떻게 내 그와 크롬의 자동 완성 배경을 무시합니까입니까? 배경 : #fff url (../../ img/site/username.png) no-repeat 12px center

출처

2015-01-16 Micael Florêncio

안녕하세요, 저는 같은 문제가 있습니다. 그것에 대한 해결책을 찾았습니까? –

유일한 해결책은 배경 이미지 스타일에서 아이콘을 제거하고 입력 필드의 왼쪽에 위치 된 이미지.

이 아이콘은 자동 완성 필드 상단에 표시되며 올바른 Z- 색인 만 구성하면됩니다.

"-webkit-box-shadow : 0 0 0px 1000px 흰색 인세 트;" 수업은 모든 배경을 다루고 투명 색상을 사용할 수 없습니다. 이것이 CSS 이미지 스타일이 해결책이되지 않는 이유입니다. 나는 또한, 국경을 구성 그들이 overwrittem했고, 노란색 자동 완성 상자 - 그림자 색상 아래에 숨겨져

/* Change Autocomplete styles in Chrome*/ 
input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus 
input:-webkit-autofill, 
textarea:-webkit-autofill, 
textarea:-webkit-autofill:hover 
textarea:-webkit-autofill:focus, 
select:-webkit-autofill, 
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus { 
    border-bottom: 1px solid #ccc!important; 
    -webkit-text-fill-color: #707173!important; 
    -webkit-box-shadow: 0 0 0px 100px #fff inset!important; 
    transition: background-color 5000s ease-in-out 0s!important; 
}

내 경우 :

는 내가 : 자동 채우기 의사 선택에 대한보다 완벽한 스타일 정의를 발견했다.

출처는 https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/

출처

2017-03-20 09:26:30

크롬 자동 완성을위한 입력 배경 변경하기

답변

관련 문제