HTML / CSS로 브라우저 양식 작성 및 입력 강조 표시 무시

139

같은 페이지에 로그인과 가입이라는 두 가지 기본 양식이 있습니다. 이제 자동 완성 양식의 로그인에 문제가 없습니다.하지만 가입 양식 자동 완성도 마음에 들지 않습니다.

또한 양식 스타일에는 무시할 수없는 노란색 배경이 있으며 인라인 CSS를 사용하여 원하지 않습니다. 노랑색을 멈추게하려면 어떻게해야합니까그리고 (아마도) 자동 충전? 미리 감사드립니다!

html  css  input  autofill 
— 카사 프
소스
4
여기에 두 가지 질문이 있습니다. 양식 자동 완성을 사용 중지하는 방법? -및-양식 자동 완성이 활성화 된 경우 노란색 배경을 재정의하는 방법은 무엇입니까? 아래 답변의 모든 의견을 읽을 때까지 명확하지 않았습니다. 당신은 질문을 편집하는 것을 고려할 수도 있습니다 (특히 현상금을 제공하기 위해 갔기 때문에).
— benzado
당신 말이 맞아요 또는 어쨌든 게으른 버전입니다.
— casraf
1
양식의 사용자로서, 자동 완성을 강조하고 강조 표시하여 시각적 선호로 인해 유용성이 손상되는 것을 싫어합니다. 사용자가 아닌 사용자가이 기능을 끄도록하십시오. 내 브라우징 경험을 내버려 두십시오.
— Byran Zaugg
즉, 등록 양식에서 자동 완성 기능 만 비활성화했습니다. 기본적으로 정기적 인 자동 완성 기능이 없어야합니다. 완성 정보는 가입 한 후에 만 ​​생성됩니다. 로그인 양식은 자동 완성 기능을 유지하고 싶지만 내부 텍스트를 읽을 수 없어서 입력 필드에 넣는 멍청한 색상을 비활성화하십시오. 배경은 노란색이고 텍스트 색상은 흰색입니다 (원래 배경은 어두운 회색입니다) .
— casraf
1
— zzzzBov

답변:

163

자동 완성을 위해 다음을 사용할 수 있습니다.

<form autocomplete="off">

착색 문제와 관련하여 :

스크린 샷에서 웹 키트가 다음 스타일을 생성한다는 것을 알 수 있습니다.

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) #id 스타일이 .class 스타일보다 훨씬 중요하므로 다음과 같이 작동 할 수 있습니다.

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) 그래도 작동하지 않으면 프로그래밍 방식으로 자바 스크립트를 통해 스타일을 설정하려고 할 수 있습니다 

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) 그래도 문제가 해결되지 않으면 :-) 다음 사항을 고려하십시오. 노란색을 숨기지 않지만 텍스트를 다시 읽을 수있게 만듭니다.

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) CSS / 자바 스크립트 솔루션 :

CSS :

input:focus {
    background-position: 0 0;
}

그리고 다음 자바 스크립트가 onload에서 실행되어야합니다.

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

예 :

<body onload="loadPage();">

행운을 빕니다 :-)

5) 위의 작업 중 입력 요소를 제거하고 복제 한 다음 복제 된 요소를 다시 페이지에 배치하면 Safari 6.0.3에서 작동합니다.

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) 여기에서 :

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);
        });
    });
}
— 필 라이 코프
소스
(1) 작동하지 않습니다. 집에 돌아 오면 (2) 시도합니다. JS가 이것을 무시할 수 있기를 바랍니다. thanks :)
— casraf
1
(4) 노랑 : 초점 테두리를 제거합니다.
— ruruskyi
마지막 비트가 당신을 위해 작동하지 않고 자바 스크립트가 어떻게 작동하는지 알고 있다면 (ID의 권리를 얻었습니다.) 당신은 내가 가진 문제를 가질 수 있습니다. 보인다. 그래서 내가 한 것은 50ms마다 복제하는 간격을 설정하는 것입니다 (setTimeout을 사용하여 400ms 후에 작동했지만 느린 연결 위험을 감수하고 싶지 않습니다). 그리고 잠시 후 간격이 제거됩니다 :code
— Mathijs Segers
var keepTheInputCloned = setInterval(function(){ var e = document.getElementById('id_email'); var ep = e.parentNode; ep.removeChild(e); var e2 = e.cloneNode(); ep.appendChild(e2); var p = document.getElementById('id_password'); var pp = p.parentNode; pp.removeChild(p); var p2 = p.cloneNode(); pp.appendChild(p2); },50); setTimeout(function(){clearInterval(keepTheInputCloned)},1000);
— Mathijs Segers
Mavericks의 Safari와 비슷한 문제가 있습니다. 그러나 방법 5를 사용하면 1 초 (또는 시간 초과를 3000으로 설정하면 3 초)가 지나면 브라우저가 승리하고 자동 완성 기능이 켜집니다. 내 사용 사례에서 다른 사이트의 정보를 가져올 수 있도록 다른 사이트의 사용자 이름 / 암호를 사용자에게 요청하므로 사이트에 사용하는 사용자 이름과 비밀번호를 자동으로 채우고 싶지 않습니다. 이것에 대한 생각이 있습니까 (원본 # 3의 운명 외에)?
— 잭 RG
218

그림자 안에 "강한"것으로 속임수를 쓰십시오.

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}
— 타마스 파프
소스
10
이것은 정말 영리합니다. :)
— Jordan Gray
3
+1000 (가능한 경우) 예, 다른 방법으로는 생각할 수 없습니다. 이것은 실제로 웹킷에 방해가됩니다 ...
— o_O
1
— 대단하고
3
이것은 작동하고 실제로 창의적이라는 점에서 훌륭합니다. 그러나 그것은 오래된 IE6 해킹 등을 상기시킵니다. 구글에 대한 욕설은 우리에게 : -webkit-autofill 매개 변수를 제공하고 디자이너가 기본값을 무시하도록 허용하지 않습니까?
— squarecandy
1
사용자 정의 할 수없는 색상 선택을 제공한다고해서 유용성이나 접근성이 도움이되지는 않습니다. 이러한 우려는 Chrome 의이 해킹을 제외하고는 여전히 개발자의 손에 달려 있습니다. 아무도 Chrome 개발자의 의도를 잘못 판단 할 수 없으며 그 결과 만 있습니다.
— 런스 터
25

이 CSS 규칙을 추가하면 노란색 배경색이 사라집니다. :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
— MCBL
소스
1
이것은 나를 위해 일했습니다-감사합니다! (실제로 원하는 색상으로 흰색을 바꿔야했지만)
— jennEDVT
2
분명히 가장 좋은 대답입니다.
— Brandon Harris
16 
<form autocomplete="off">

거의 모든 최신 브라우저가이를 존중합니다.

— 제이슨 케스터
소스
7
대단하지만 덜 중요한 문제 만 해결합니다. 자동 완성을 유지하면서 스타일 ( prntscr.com/4hkh ) 웹킷이 목을 찌르는 방법은 무엇입니까? o : 감사합니다
— casraf
1
실제로, 둘 다해야합니다. chrome / safari / ff가 비밀번호로 자동 입력되었음을 알리기 위해 상자 만 노란색으로 바뀝니다. 채울 것을 말하지 않으면 색칠 할 기회가 없습니다.
— Jason Kester
11
네,하지만 제가 말한 것을보십시오 : " 자동 완성을 유지하면서 스타일 웹킷
— 셰 이브를
유일한 문제 autocomplete는 버전 5 이전의 HTML에서는 유효하지 않다는 것입니다.
— Paul D. Waite
15

검색 2 시간 후에도 어떻게 든 Chrome이 여전히 노란색을 재정의하는 것처럼 보이지만 해결 방법을 찾았습니다. 호버, 포커스 등에서도 작동합니다. 추가 !important하기 만하면됩니다.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

입력 필드에서 노란색을 완전히 제거합니다.

— 님
소스
그것은 1000px없이 나를 위해, 어디서나 0, -webkit-box-shadow없이 작동합니다 : 0 0 0 0 흰색 삽입! 중요;
— Luis Lopez
3

브라우저가이를 추적하지 않도록 양식 요소의 이름 속성을 생성 된 것으로 변경할 수도 있습니다. 그러나 요청 URL이 동일하면 firefox 2.x +와 Google 크롬에 많은 문제가없는 것 같습니다. 기본적으로 가입 양식에 솔트 요청 매개 변수와 솔트 필드 이름을 추가하십시오.

그러나 autocomplete = "off"가 여전히 최고의 솔루션이라고 생각합니다 :)

— 드미트리 리크 텐
소스
3

을 통해 HTML5에서 자동 완성 기능을 비활성화 할 수 autocomplete="off"있지만 브라우저의 강조 표시를 재정의 할 수는 없습니다. ::selectionCSS에서 혼란을 겪을 수 있습니다 (대부분의 브라우저에는 작동하기 위해 공급 업체 접두사가 필요하지만).

브라우저 공급 업체가 특정 공급 업체별 재정의 방법을 구체적으로 구현하지 않은 경우 이미 사용자의 사이트 스타일 시트를 재정의하려는 스타일에 대해서는 아무것도 수행 할 수 없습니다. 이들은 일반적으로 스타일 시트가 적용된 후에 적용되며 ! important재정의를 무시 합니다.

— 앨런 플럼
소스
3

<form>요소에 코드 만 있으면 브라우저의 자동 완성이 여전히 자동 완성됩니다 .

나는 그것을 <input>요소 에 넣으려고 시도했고 더 잘 작동했다.

<form autocomplete="off">  AND  <input autocomplete="off">

이 속성에 대한 지원은 중단되지만 https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1을 참조하십시오

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

내가 찾은 또 다른 해결 방법은 입력 필드 내에서 전자 메일, 사용자 이름 또는 전화 필드임을 나타내는 자리 표시자를 가져 오는 것입니다 (예 : "귀하의 전자 메일", "이메일"등).

여기에 이미지 설명을 입력하십시오

이렇게하면 브라우저가 어떤 종류의 필드인지 알 수 없으므로 자동 완성을 시도하지 않습니다.

— andstud.io
소스
내가 이것에 대해 좋아하는 것은 대부분의 사람들이 페이지를 다시로드 할 때 (예 : 긴 텍스트 영역) 채워지지 않는 전체 양식에 감사하지 않지만 개발자는 특정 요소 (예 : 은행 카드 번호)가 채워지는 것을 방지 할 수 있다는 것입니다.
— 그러나이
1

입력 필드에 있으면 "노란색"을하려는 것입니다 ...

  1. CSS로 배경색을 설정하십시오. #ccc (연한 회색)라고합시다.
  2. 필드를 임시로 "sometext"로 채우는 value = "sometext"추가
  3. (선택 사항) 실제 텍스트를 넣을 때 "sometext"를 명확하게하려면 작은 자바 스크립트를 추가하십시오.

따라서 다음과 같이 보일 수 있습니다.

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />
— 백마
소스
1

이것은 Safari와 Chrome 모두에서 문제를 해결합니다.

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}
— 아르 잔
소스
1
나는 그것이 믿지만 초 당 50 번 이것을하는 것이 조금 힘들지 않습니까? 나는 그것이 작동하고 너무 느리지 않을 것이라는 것을 안다. 그러나 조금 너무 보인다.
— Mathijs Segers
0

링크 된 스크린 샷은 WebKit이 input:-webkit-autofill해당 요소에 대한 선택기 를 사용하고 있음을 나타 냅니다. 이것을 CSS에 넣으려고 했습니까?

input:-webkit-autofill {
    background-color: white !important;
}

그래도 문제가 해결되지 않으면 아무것도 할 수 없습니다. 이러한 필드는 개인 정보 (예 : 집 주소)로 자동 입력되었음을 사용자에게 알리기 위해 강조 표시되며 페이지를 숨기면 보안 위험이 발생한다고 주장 할 수 있습니다.

— 벤 자도
소스
0

form요소는 가지고 autocomplete당신이 설정할 수있는 속성을 off. CSS에서 !important속성 뒤 의 지시문은 그것을 재정의하지 않습니다.

background-color: white !important;

오직 IE6만이 그것을 이해하지 못합니다.

내가 당신을 오해하면, outline당신이 유용하게 찾을 수 있는 재산도 있습니다.

— Zneak
소스
2
Chrome은 입력 필드를 자동
— 채울
@Torandi 사용자 에이전트 스타일 시트 때문일 수 있습니다. !important지시어 가없는 경우 사용자 에이전트 스타일 시트의 설정이 마지막에 적용되어야합니다 .이 경우 다른 모든 것보다 우선합니다. 사용자 에이전트 스타일 시트를 확인해야합니다 (어디에서 찾을 수 있는지 모르겠습니다).
— zneak
0

자바 스크립트로 Google 툴바의 자동 완성 기능이 사용 중지 된 것을 확인했습니다. 다른 자동 완성 도구와 함께 작동 할 수도 있습니다. 자동 완성 기능이 내장 된 브라우저에서 도움이되는지 모르겠습니다.

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>
— 아담
소스
0

많은 일을 시도한 후 자동 입력 필드를 손상시키고 중복으로 대체하는 작동 솔루션을 발견했습니다. 첨부 된 이벤트를 풀지 않기 위해 다른 (약간의) 솔루션을 생각해 냈습니다.

각 "입력"이벤트에서 "변경"이벤트를 모든 관련 입력에 신속하게 연결합니다. 자동 완성되었는지 테스트합니다. 그렇다면 새 텍스트 이벤트를 전달하여 브라우저가 사용자에 의해 값이 변경되었다고 생각하도록하여 노란색 배경을 제거하도록합니다.

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});
— 에르 네츠 칼손 스
소스
0

모든 브라우저를위한 간단한 자바 스크립트 솔루션 :

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

입력 복제, 속성 재설정 및 원래 입력 숨기기. iPad에는 타임 아웃이 필요합니다

— 매우 조그만 것
소스
0

브라우저가 비밀번호 유형 필드를 검색하기 때문에 다른 해결 방법은 양식 시작 부분에 숨겨진 필드를 포함시키는 것입니다.

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
— 맥 맥
소스
0

너무 많은 스레드를 읽고 많은 코드 조각을 사용해보십시오. 모든 것을 수집 한 후, 로그인 및 비밀번호 필드를 깨끗하게 비우고 배경을 흰색으로 재설정하는 유일한 방법은 다음과 같습니다.

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

의견이 있으시면 언제든지 개선 사항을 모두 확인하십시오.

— 트위스트
소스
0

최신 브라우저에서는 자동 완성 기능이 지원되지 않습니다. 내가 찾은 자동 완성을 해결하는 가장 쉬운 방법은 HTML과 JS를 약간 추적하는 것입니다. 가장 먼저 할 일은 HTML의 입력 유형을 'password'에서 'text'로 변경하는 것입니다.

<input class="input input-xxl input-watery" type="text" name="password"/>

창이로드 된 후 자동 완성이 시작됩니다. 괜찮아. 그러나 필드 유형이 '비밀번호'가 아닌 경우 브라우저는 어떤 필드를 완성해야하는지 알지 못했습니다. 따라서 양식 필드에는 자동 완성 기능이 없습니다.

그런 다음 이벤트 포커스를 비밀번호 필드에 바인드하십시오 (예 : 백본에서 :

'focusin input[name=password]': 'onInputPasswordFocusIn',

에서 onInputPasswordFocusIn간단한 확인을 통해 필드 유형을 비밀번호로 변경하십시오.

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

그게 다야!

UPD :이 기능은 비활성화 된 JavaSciprt에서 작동하지 않습니다.

2018 년 UPD. 재미있는 트릭도 발견되었습니다. readonly 속성을 입력 필드로 설정하고 포커스 이벤트에서 제거하십시오. 먼저 브라우저가 필드를 자동으로 채우지 못하게하고, 둘째로 데이터를 입력 할 수 있습니다.

— volodymyr3131
소스
자동 완성 은 표준의 일부이지만 사용법 및 구현이 다를 수 있습니다. 또한 IE에서 입력 유형 변경이 크게 실패하기 때문에 jQuery
— 가이를
@casraf 죄송합니다. standart의 일부이지만 모든 최신 브라우저에서 작동하지 않으므로 발명 된 기능을 수행하지 않습니다. EDGE에서는 이전 버전에 대해 아무 것도 말할 수 없습니다. (
— volodymyr3131
사실, 그것은 모든 곳에서 구현되지 않습니다. 문제는 여전히 IE를 지원하려는 거리에 따라 v 11 이전에 입력 유형을 변경할 수 있다고 생각하지 않습니다. 이전 버전에 대해 걱정하지 않는다면 이전 버전의 autocomplete=offFF, Chrome 및 IE에서 작동하는 것처럼을 사용하는 것이
— 좋습니다.
입력과 양식 모두에 autocomplete = off를 사용하려고 시도했지만 Chrome은 여전히 ​​가입 및 로그인 양식 데이터를 채 웁니다. (주석에 따라 일부 경우에는 작동하기 때문에 이상한 마법입니다. 일부는 그렇지 않습니다 =)
— volodymyr3131
이러한 표준은 실제로 지속적으로 준수되지 않습니다. 그것은 부끄러운 일이며 우리의 삶을 더 어렵게 만듭니다 :(
— casraf
0

또한 텍스트 색상을 더 어둡게 변경해야했습니다 (StackOverflow 어두운 테마 색상 참조).

따라서 @ Tamás Pap, @MCBL 및 @don의 솔루션이 혼합되었습니다.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}
— 안드레이
소스
-3

왜 이것을 CSS에 넣지 않습니까?

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

문제를 해결해야합니다. 유용성 문제가 발생하지만 사용자는 양식이 익숙한 방식으로 자동 완성되었음을 알 수 없기 때문에 유용합니다.

[edit]이 글을 게시 한 후 비슷한 답변이 이미 제공되어 있으며 작동하지 않았다고 언급했습니다. 테스트 할 때 왜 효과가 있었는지 잘 모르겠습니다.

— 크리스
소스
크롬과 사파리 모두에서 작동하지 않습니다. 스타일은 input:-webkit-autofill하고 input --webkit-autocomplete단순히 존재하지 않습니다
— ruruskyi
@EliseuMonar : 거짓말을하지 않았다고 확신하지만 테스트 방법이나 장소에 대한 세부 사항은 기억 나지 않습니다. 코드 자체는 아마도 복사 / 붙여 넣기가 아닌 메모리에서 입력되었으므로 자동 완성 대 자동 완성? 난 몰라
— Kris
-3

여기서 진짜 문제는 웹킷 (Safari, Chrome 등)에 버그가 있다는 것입니다. 페이지에 둘 이상의 [form]이 있고 각각 [input type = "text"name = "foo"...] (예 : 'name'속성에 대해 동일한 값을 가짐)을 가진 경우 사용자가 반환 할 때 자동 완성은 전송 된 [양식]이 아니라 페이지의 첫 번째 [양식]의 입력 필드에서 수행됩니다. 두 번째로 NEXT [form]이 자동으로 채워집니다. SAME 이름을 가진 입력 텍스트 필드가있는 [form] 만 영향을받습니다.

이것은 웹킷 개발자에게보고해야합니다.

Opera는 올바른 [양식]을 자동 완성합니다.

Firefox와 IE는 자동 완성되지 않습니다.

다시 말하지만 이것은 Webkit의 버그입니다.

— 린드버그
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.