Chrome이 내 사이트의 입력 상자를 황변하지 않게하려면 어떻게합니까?

양식 제출, 유효성 검사 후의 다른 텍스트 및 시각 보조 도구 중에서 입력 상자를 빨간색으로 표시하여주의가 필요한 대화 형 영역을 나타냅니다.

Chrome (및 Google 툴바 사용자의 경우)에서 자동 완성 기능은 입력 양식의 색상을 노란색으로 변경합니다. 복잡한 문제는 다음과 같습니다. 사용자의 로그인 속도를 높이기 위해 양식에 자동 완성이 허용되기를 원합니다. 오류가 발생했을 때 자동 완성 속성을 해제하는 기능을 검사하려고하지만 복잡합니다. 페이지에서 영향을받는 단일 입력에 대해 자동 완성 기능을 프로그래밍 방식으로 끄는 코딩 비트. 간단히 말해서 이것은 큰 두통이 될 것입니다.

따라서이 문제를 피하기 위해 Chrome이 입력 상자의 색상을 다시 지정하지 못하게하는 간단한 방법이 있습니까?

[편집] 나는 아래의 중요한 제안을 시도했지만 아무런 효과가 없었다. ! important 속성이 작동하는지 확인하기 위해 Google 툴바를 아직 확인하지 않았습니다.

내가 알 수있는 한 autocomplete 속성을 사용하는 것 이외의 다른 방법은 없습니다 (작동하는 것처럼 보입니다).

Firefox에서는 autocomplete = "off"속성을 사용하여 자동 완성 기능을 비활성화 할 수 있습니다. Chrome에서 작동하는 경우 (테스트하지 않은 경우) 오류가 발생했을 때이 속성을 설정할 수 있습니다.

단일 요소 모두에 사용할 수 있습니다

<input type="text" name="name" autocomplete="off">

... 전체 형태뿐만 아니라

<form autocomplete="off" ...>

CSS 아웃 라인 속성을 none으로 설정하십시오.

input[type="text"], input[type="password"], textarea, select { 
    outline: none;
}

브라우저가 배경색을 추가 할 수있는 경우 다음과 같은 방법으로 해결할 수 있습니다

:focus { background-color: #fff; }

이것은 정확히 당신이 찾고있는 것입니다!

// Just change "red" to any color
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px red inset;
}

약간의 jQuery를 사용하면 자동 완성 기능을 그대로 유지하면서 Chrome 스타일을 제거 할 수 있습니다. 나는 여기에 대한 짧은 게시물을 썼습니다 : http://www.benjaminmiles.com/2010/11/22/fixing-google-chromes-yellow-autocomplete-styles-with-jquery/

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);
    });
});}

모든 필드의 테두리를 제거하려면 다음을 사용할 수 있습니다.

*:focus { outline:none; }

선택 필드의 테두리를 제거하려면이 클래스를 원하는 입력 필드에 적용하십시오.

.nohighlight:focus { outline:none; }

물론 원하는대로 테두리를 변경할 수도 있습니다.

.changeborder:focus { outline:Blue Solid 4px; }

(Bill Beckelman : CSS를 사용하여 활성 필드 주변의 Chrome 자동 테두리 무시 )

예, 그것은 큰 두통이 될 것입니다. 내 의견으로는 그만한 가치가 없습니다. UI 전략을 약간 조정할 수 있고 상자를 빨간색으로 채색하는 대신 테두리를 빨간색으로 채색하거나 옆에 작은 빨간색 테이프 (예 : Gmail "로드 중"테이프)를 넣을 수 있습니다. 초점.

jQuery와 함께 케이크 한 조각입니다.

if ($.browser.webkit) {
    $("input").attr('autocomplete','off');
}

또는 좀 더 선택적으로하려면 선택기의 클래스 이름을 추가하십시오.

내 의견으로는 가장 간단한 방법은 다음과 같습니다.

1. 가져 오기 http://www.quirksmode.org/js/detect.html

2. 이 코드를 사용하십시오 :

   if (BrowserDetect.browser == "Chrome") {
     jQuery('form').attr('autocomplete','off');
   };

@ Benjamin 그의 솔루션을 적용한 후에도 뒤로 버튼을 누르면 여전히 노란색 하이라이트가 나옵니다.

어떻게 든 이 노란색 하이라이트가 다시 나타나지 않도록하는 내 솔루션 은 다음 jQuery 자바 스크립트를 적용하는 것입니다.

<script type="text/javascript">
    $(function() {
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
        var intervalId = 0;
            $(window).load(function() {
                intervalId = setInterval(function () { // << somehow  this does the trick!
                    if ($('input:-webkit-autofill').length > 0) {
                        clearInterval(intervalId);
                        $('input:-webkit-autofill').each(function () {
                            var text = $(this).val();
                            var name = $(this).attr('name');
                            $(this).after(this.outerHTML).remove();
                            $('input[name=' + name + ']').val(text);
                        });
                    }
                }, 1);
            });
        }
    });
</script>

그것이 누군가를 돕기를 바랍니다!

작동합니다. 무엇보다도, rgba 값을 사용할 수 있습니다 (상자 그림자 삽입 해킹은 rgba에서 작동하지 않음). 이것은 @ Benjamin의 답변을 약간 조정 한 것입니다. $ (window) .load () 대신 $ (document) .ready ()를 사용하고 있습니다. 그것은 나에게 더 잘 작동하는 것 같습니다. 이제 FOUC가 훨씬 적습니다. $ (document) .ready () 사용에 대한 단점이 있다고 생각하지 않습니다.

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(document).ready(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);
        });
    });
};

오늘 버전의 경우 두 로그인 입력 중 하나에 배치하면 작동합니다. 또한 버전 40 이상 및 Firefox 최신 버전 문제를 해결하십시오.

<input readonly="readonly" onfocus="this.removeAttribute('readonly');" />

input:focus { outline:none; }

그것은 나를 위해 훌륭했지만 텍스트 영역의 CSS에 이것을 포함시키고 싶을 것입니다.

textarea:focus { outline:none; }

또한 가장 명백한 것처럼 보일 수도 있지만 초보자에게는 다음과 같이 색상을 설정할 수도 있습니다.

input:focus { outline:#HEXCOD SOLID 2px ; }

내가 올바르게 기억한다면 입력의 배경색에 대한 스타일 시트의 !!