크롬 자동 완성 나누기 스타일 선택

Question

모든 브라우저에서 잘 작동하는 스타일의 선택 상자가 있습니다. 여기에 (다양한 브라우저를 처리하기 위해 서로 다른 스타일을 많이 포함)에 CSS가있다 :

select { 
    background-image: url(../img/dropdown.png); 
    background-repeat: no-repeat; 
    background-position: right center; 
    padding-bottom: 6px; 
    padding-right: 36px; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    -ms-border-radius: 0; 
    -o-border-radius: 0; 
    border-radius: 0; 
    -webkit-appearance: none; 
    background-color: white; 
    border: 1px solid; 
    border-right: none; 
    border-color: #9da6ab; 
    color: #36495a; 
    display: inline-block; 
    outline: 0; 
    margin: 0; 
    width: 100%; 
    height: 28px; 
    padding: 5px 36px 6px 1px; 
    text-align: left; 
    font-size: 13px; 
    font-family: Arial,sans-serif; 
    vertical-align: middle; 
    -moz-appearance:none; 
    text-indent: 0.01px; 
    text-overflow: ''; 
} 

select::-ms-expand { 
    display:none; 
} 

html.lt-ie10 select { 
    background-image:none; 
    height:32px; 
    padding-right: 6px; 
    border-right: 1px solid; 
} 

크롬 (표준 이슈의 이름, 주소, 국가 및 신용 카드 정보 양식 인) 내 양식을 자동 완성 할 때, 자동 채워진 필드는 그 옅은 노란색 배경색을 갖습니다. 그러나 문제는 내 background-image 지시어를 숨기는 것입니다. 드롭 다운 이미지는 페이지를 스크롤하거나 필드를 클릭하면 바로 돌아옵니다.

전에 :

후 :

내 첫번째 생각이 난 그냥 선택을 제공하기 위해 필요하다고이었다 position:relative하고는 있지만 아무것도 변경하지 않은 z-index . 자동 완성 기능을 사용하지 못하게하려고 할 수도 있지만 사용자의 예상되는 기능이 저하됩니다. 그런 다음 배경 이미지에 !important을 설정하면 Chrome에서 내 이미지를 일시적으로 덮어 쓰는 스타일 시트가 적용되었을 가능성이 높습니다. 나다. jQuery를 통해 다른 필드 (또는 동일한 필드)에 포커스를 설정하면 작동하지 않습니다 (적어도 개발자 도구 콘솔에는 없었습니다). 수퍼 추한 해킹 그 자동 완성 이벤트를 잡을 수 (가능하면, 아니, 난 그냥 이것에 대한 jQueryUI를 설치하지 않는거야) 그리고 window.scrollBy(0,1);window.scrollBy(0,-1) 신속하게 위아래로, 전체 css 새로 고침없이 컨트롤을 repaints 스크롤 사용 (콘솔 테스팅을 기반으로 실제로 화면을 움직이는 것처럼 보이지는 않습니다). 그러나 자동 완성 이벤트를 잡는 방법을 알아낼 수는 없으며 모든 흐림 효과에서 자동 완성 이벤트를 실행하지 않을 것입니다 ... 그리고 내가 흐리게 처리하더라도 그 효과는 여전히 해결되지 않습니다. 자동 완성 드롭 다운을 표시하면 노란색 배경이 나타나고 스타일이 깨집니다.

내 CSS에는 이러한 문제가 발생합니까? 아니면 크롬의 어리 석음을 보완하기 위해 자바 스크립트를 사용해야합니까?

Answer 1

사용 노란색 배경을 제거 할 수 있습니다 :이 솔루션에서

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { 
$(window).load(function(){ 
    $('input:-webkit-autofill').each(function(){ 
     var text = $(this).val(); 
     var name = $(this).attr('name'); 
     $(this).after(this.outerHTML).remove(); 
     $('input[name=' + name + ']').val(text); 
    }); 
}); 
}