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

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 전략을 약간 조정하면 상자를 빨간색으로 채색하는 대신 테두리를 빨간색으로 채색하거나 옆에 작은 빨간색 테이프 (예 : gmails "Loading"테이프)를 넣을 수 있습니다. 초점.

---

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>

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

---

This works. Best of all, you can use rgba values (the box-shadow inset hack doesn't work with rgba). This is a slight tweak of @Benjamin's answer. I am using $(document).ready() instead of $(window).load(). It seems to work better for me - now there's much less FOUC. I don't believe there are and disadvantages to using $(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);
        });
    });
};

---

for today's versions, This works too if placed in one of the two login inputs. Also fix the version 40+ and late Firefox issue.

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

---

input:focus { outline:none; }

That worked great for me but more than likely to keep things uniform on your site your going to want to also include this in your CSS for textareas:

textarea:focus { outline:none; }

Also it may seem obvious to most but for beginners you can also set it to a color as such:

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

---

If I remember correctly, an !important rule in the stylesheet for the background color of the inputs will override the Google toolbar autocomplete - presumably the same would be true of Chrome.

참고URL : https://stackoverflow.com/questions/175951/how-do-i-stop-chrome-from-yellowing-my-sites-input-boxes