Chrome이 내 사이트의 입력 상자를 노란색으로 잡아서 어떻게 중지합니까?

https://stackoverflow.com/questions/175951

05-07-2019
|

문제

양식 제출, 추정 후에 다른 텍스트 및 시각 보조 도구 중에서도 입력 상자를 빨간색으로 채색하여 대화식 영역을주의가 필요한 상호 작용합니다.

Chrome (및 Google 도구 모음 사용자의 경우)에서는 자동 필 기능이 내 입력 형태를 다시 컬러로 재배합니다. 복잡한 문제는 다음과 같습니다. 사용자가 로그인하는 사용자가 속도가 빠르기 때문에 내 양식에 자동 완성이 허용되기를 원합니다. 오류가 발생하는 경우 자동 완성 속성을 OFF로 전환 할 수 있지만 복잡합니다. 페이지의 단일 영향 입력에 대한 자동 완성을 프로그래밍 방식으로 끄기 위해 코딩의 비트. 이것은 간단히 말해서 큰 두통이 될 것입니다.

그렇다면 그 문제를 피하기 위해 Chrome이 입력 상자를 다시 컬러링하는 것을 막는 더 간단한 방법이 있습니까?

편집] 아래의 중요한 제안을 시도했지만 효과가 없었습니다. 중요한 속성이 그 효과가 있는지 확인하기 위해 Google 도구 모음을 아직 확인하지 않았습니다.

내가 알 수있는 한, 자동 완성 속성을 사용하는 것 외에는 아무런 수단이 없습니다 (작동하는 것처럼 보입니다).

해결책

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

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

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

...뿐만 아니라 전체 형태도 마찬가지입니다

<form autocomplete="off" ...>

다른 팁

CSS 개요 속성을 없음으로 설정하십시오.

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-autocemplete-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 전략을 약간 조정할 수 있고 상자를 빨간색으로 채색하는 대신 테두리를 빨간색으로 채색하거나 옆에 작은 빨간 테이프를 넣을 수 있습니다. 집중하다.

jQuery가있는 케이크 조각입니다.

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

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

내 생각에 더 간단한 방법은 다음과 같습니다.

얻다 http://www.quirksmode.org/js/detect.html

이 코드 사용 :

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

@benjamin의 솔루션을 적용한 후, 나는 뒤로 버튼을 누르면 여전히 노란색 하이라이트를 줄 것임을 알았습니다.

내 해결책 어떻게든 이 노란색 하이라이트가 다시 돌아 오지 않도록하는 것은 다음 jQuery javaScript를 적용하는 것입니다.

<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 값을 사용할 수 있습니다 (Box-Shadow Inset Hack은 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; }

그것은 나에게 큰 도움이되었지만 사이트에서 물건을 균일하게 유지할 가능성이 높습니다. Textareas의 CSS에도 이것을 포함 시키려고합니다.

textarea:focus { outline:none; }

또한 대부분은 분명해 보일 수 있지만 초보자에게는 다음과 같은 색상으로 설정할 수도 있습니다.

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

내가 올바르게 기억한다면, 입력의 배경색에 대한 스타일 시트의 중요한 규칙은 Google 도구 모음 자동 완성을 무시할 것입니다. 아마도 Chrome에서도 마찬가지 일 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow