HTML/CSS로 브라우저 양식 채우기 및 입력 강조 표시 재정의
저는 두 가지 기본 양식이 있습니다. 둘 다 같은 페이지에 있는 로그인과 가입입니다.지금은 사인폼 자동채움에 문제가 없지만, 사인폼도 자동채움에 문제가 없고, 마음에 들지 않습니다.
또한 폼 스타일이 노란색 배경을 갖게 되어 오버라이드 할 수 없고 인라인 CSS를 사용하고 싶지 않습니다.노란색으로 칠해지거나 자동 충전이 되지 않게 하려면 어떻게 해야 합니까?
업데이트: 최신 Chrome 버전에서는 작동하지 않습니다.
"강한" 안쪽 그림자로 속입니다.
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;
}
자동 완성의 경우 다음을 사용할 수 있습니다.
<form autocomplete="off">
착색 문제와 관련하여:
당신의 스크린샷으로부터 나는 웹킷이 다음과 같은 스타일을 생성하는 것을 볼 수 있습니다.
input:-webkit-autofill {
background-color: #FAFFBD !important;
}
1) #id-styles가 .class styles보다 훨씬 더 중요하기 때문에 다음이 작동할 수 있습니다.
#inputId:-webkit-autofill {
background-color: white !important;
}
2) 만약 그것이 작동하지 않는다면, 당신은 javascript를 통해 프로그래밍 방식으로 스타일을 설정할 수 있습니다.
$("input[type='text']").bind('focus', function() {
$(this).css('background-color', 'white');
});
3) 그게 안된다면,
당신은 끝장입니다 :-) 예를 들어, 이렇게 하면 노란색이 가려지지 않지만 텍스트를 다시 읽을 수 있습니다.
input:-webkit-autofill {
color: #2a2a2a !important;
}
4) CSS/jav스크립트 솔루션:
CSS:
input:focus {
background-position: 0 0;
}
그리고 다음 javascript는 load에서 실행되어야 합니다.
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);
});
});
}
이 CSS 규칙을 추가하면 노란색 배경색이 사라집니다.:)
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
이 여전히 하는 것 사항을 2시간 동안 검색한 결과 구글 크롬이 여전히 노란색을 무시하는 것 같지만 해결책을 찾았습니다.호버, 포커스 등에도 효과가 있을 것입니다.추가하기만 하면 됩니다.!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;
}
입력 필드에서 노란색을 완전히 제거합니다.
이것이 저에게 효과가 있는 것 같습니다.
input {
-webkit-background-clip: text !important;
}<form autocomplete="off">
거의 모든 현대 브라우저가 이를 존중할 것입니다.
때때로 브라우저의 자동 완료는 코드를 가지고 있을 때에도 여전히 자동 완료됩니다.<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
제가 찾은 또 다른 방법은 이메일, 사용자 이름 또는 전화 필드(즉, 이메일, 사용자 이름 또는 전화 필드)를 암시하는 입력 필드 안의 자리 표시자를 제거하는 것입니다."당신의 이메일", "이메일" 등)
이렇게 하면 브라우저가 어떤 종류의 필드인지 알 수 없으므로 자동 완성을 시도하지 않습니다.
브라우저가 폼 요소를 추적하지 못하도록 폼 요소의 이름 속성을 생성된 것으로 변경할 수도 있습니다.그러나 firefox 2.x+와 Google chrome은 요청 url이 동일하다면 큰 문제가 없을 것 같습니다.기본적으로 salt request param과 salt field name을 sign-up form에 추가해보세요.
하지만 autoccomplete="Off"가 여전히 최고의 솔루션이라고 생각합니다. :)
HTML5 기준으로 자동 완료를 비활성화할 수 있습니다.autocomplete="off"), 그러나 브라우저의 강조 표시를 무시할 수는 없습니다.당신은 장난칠 수 있습니다.::selectionCSS에서 (대부분의 브라우저는 그것이 작동하기 위해 벤더 접두사가 필요하지만, 그것은 아마도 당신에게도 도움이 되지 않을 것입니다.
브라우저 공급업체가 벤더 고유의 재정의 방법을 구체적으로 구현하지 않는 한, 이미 사용자의 사이트 스타일시트를 재정의하도록 의도된 스타일에 대해서는 아무 조치도 취할 수 없습니다.일반적으로 스타일시트를 적용하고 무시한 후 적용됩니다.! important오버라이드도 가능합니다.
이 방법으로 자동 채우기 색상을 제거할 수 있었습니다.
// Workaround to remove autofill color from inputs
input, select {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
이것은 제가 테스트한 바로는 iOS에서 사파리와 크롬 그리고 안드로이드에서 크롬에서 작동합니다.
이를 통해 사파리와 크롬 모두의 문제가 해결됩니다.
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);
}
수용된 답변은 구체적인 사례에 대한 좋은 답변이었을 수도 있지만, 저는 배경이 투명한 각진 소재를 사용하고 있었고, 여기에 <입력> 필드는 화려한 테두리가 있는 '전체 소재 필드'가 아니었습니다.
저는 자동 채우기 의사 요소에 매우 긴 전환을 강요하는 이 수정된 솔루션을 만들었습니다. 따라서 사용자가 설정한 1000000000초 정도의 상당 시간 동안 동일한 페이지에 머물지 않는 한 속성의 변화가 눈에 띄지 않도록 말입니다.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
transition: all 10000000s;
}
form는이 .autocomplete설정할 수 있는 특성off . CSS !important속성이 오버라이드되지 않도록 한 후 지시:
background-color: white !important;
IE6만 못 알아듣습니다.
제가 오해를 하셨다면.outline당신이 유용하다고 생각할 수 있는 재산.
입력 필드에 있는 경우 "노란색으로 표시 안 함"...
- CSS로 배경색 설정...#ccc(연회색)라고 합시다.
- 필드를 임시로 "sometext"로 채우는 add value="sometext"
- (선택사항) 실제 텍스트를 넣으러 갈 때 "sometext"를 명확하게 하기 위해 자바스크립트를 약간 추가합니다.
그래서, 다음과 같이 보일 수도 있습니다.
<input id="login" style="background-color: #ccc;" value="username"
onblur="if(this.value=='') this.value='username';"
onfocus="if(this.value=='username') this.value='';" />
약간의 CSS 해킹을 사용해 보겠습니다.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
input:-internal-autofill-selected {
-webkit-text-fill-color: #000;
background: #fff !important;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0%), inset 0 0 0 100px #fff;
}
그들의 의견에 대한 투명한 배경을 원하는 사람들을 위해 와말의 이 훌륭한 해결책을 공유하는 것입니다.기본 입력 스타일에서 자동 채우기를 위한 웹킷 스타일로 전환할 때 오랜 지연 시간을 추가하여 모든 성가신 웹킷 기본 스타일을 무시합니다.
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 9999s;
transition-delay: 9999s;
}당신이 링크한 스크린샷은 웹킷이 셀렉터를 사용하고 있다고 말합니다.input:-webkit-autofill그런 요소들에 대해서는이것을 CSS에 넣어보셨나요?
input:-webkit-autofill {
background-color: white !important;
}
만약 효과가 없다면, 아마 아무것도 없을 겁니다.이러한 필드는 개인 정보(예: 사용자의 집 주소)로 자동 입력되었음을 사용자에게 알리기 위해 강조 표시되며, 페이지를 숨기도록 허용하면 보안 위험이 발생한다는 주장이 제기될 수 있습니다.
구글 툴바의 자동완성 기능이 자바스크립트로 비활성화된 것을 보았습니다.다른 자동 채우기 도구와 함께 작동할 수도 있습니다. 자동 완성이 내장된 브라우저에서 도움이 될지는 모르겠습니다.
<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>
여러 가지 시도 끝에 자동 충전된 필드를 무력화하고 복제된 것으로 대체하는 작업 솔루션을 발견했습니다.첨부된 이벤트를 느슨하게 하지 않기 위해, 저는 다른 (조금 긴) 해결책을 생각해 냈습니다.
각 "입력" 이벤트가 발생할 때마다 "변경" 이벤트를 관련된 모든 입력에 신속하게 됩니다.자동으로 채워졌는지 테스트합니다.예인 경우 브라우저가 사용자에 의해 값이 변경되었다고 생각하도록 속여서 노란색 배경을 제거할 수 있는 새 텍스트 이벤트를 발송합니다.
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);
}
});
모든 브라우저를 위한 간단한 자바스크립트 솔루션:
setTimeout(function() {
$(".parent input").each(function(){
parent = $(this).parents(".parent");
$(this).clone().appendTo(parent);
$(this).attr("id","").attr("name","").hide();
});
}, 300 );
입력을 복제하고 속성을 재설정한 후 원래 입력을 숨깁니다.iPad의 경우 시간 초과가 필요합니다.
브라우저에서 비밀번호 유형 필드를 검색하므로 양식 맨 앞에 숨겨진 필드를 포함하는 것도 해결할 수 있습니다.
<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
나는 수많은 스레드를 읽었고 수많은 코드를 시도했습니다.그 모든 것을 수집한 후 로그인 및 비밀번호 필드를 깨끗이 비우고 배경을 흰색으로 재설정할 수 있는 유일한 방법은 다음과 같습니다.
$(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);
});
자유롭게 의견을 내십시오. 일부를 찾으시면 모든 기능 향상에 열려 있습니다.
최신 브라우저에서는 자동 완료를 지원하지 않습니다.제가 찾은 자동 완성을 해결하는 가장 쉬운 방법은 HTML과 JS로 된 작은 트랙이었습니다.먼저 HTML의 입력 유형을 '비밀번호'에서 '텍스트'로 변경하는 것입니다.
<input class="input input-xxl input-watery" type="text" name="password"/>
창이 로드된 후 자동 완료가 시작됩니다.괜찮습니다.그러나 사용자의 필드 유형이 '비밀번호'가 아닌 경우 브라우저는 어떤 필드를 완료해야 하는지 알 수 없었습니다.따라서 양식 필드에는 자동 완성이 없습니다.
그런 다음 이벤트 포커스를 암호 필드에 바인딩합니다(예: Backbone:
'focusin input[name=password]': 'onInputPasswordFocusIn',
onInputPasswordFocusIn, 필드 유형을 암호로 변경하기만 하면 됩니다.
if (e.currentTarget.value === '') {
$(e.currentTarget).attr('type', 'password');
}
그거에요!
업데이트: 이 작업은 비활성화된 JavaSciprt에서 작동하지 않습니다.
2018년 업드.재미있는 속임수도 발견했습니다.읽기 전용 속성을 입력 필드에 설정하고 포커스 이벤트에서 제거합니다.첫째, 브라우저에서 필드를 자동으로 채울 수 없도록 하고, 둘째, 데이터를 입력할 수 있도록 합니다.
텍스트 색상도 더 어두운 것으로 변경해야 했습니다(StackOverflow 어두운 테마 색상 참조).
따라서 @Tamás Pap, @MCBL 및 @don's 솔루션이 혼합된 결과로 이어졌습니다.
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;
}
다음을 사용하여 자동 입력 스타일을 지정할 수 있습니다.:-webkit-autofill
웹킷 접두사가 붙은 파이어폭스에서도!
배경색을 바꾸는 방법으로는 박스 쉐도우 트릭이 있습니다.
그리고 Firefox의 경우 추가로 필요합니다.filter:none.
:-webkit-autofill {
filter:none; /* needed for firefox! */
box-shadow: 0 0 0 100px rgba(38, 163, 48, 0.212) inset;
}
입력 태그에 autoccomplete=" none"을(를) 사용해 보십시오.
이거 나한테 효과가 있어요.
그냥 CSS에 넣어두는게 어때요?
input --webkit-autocomplete {
color: inherit;
background: inherit;
border: inherit;
}
그것은 당신의 문제를 해결할 것입니다.사용자가 양식이 자신이 익숙한 방식으로 자동 입력된 것을 볼 수 없기 때문에 사용성 문제가 발생합니다.
[edit] 이 글을 올린 후에 비슷한 답변이 이미 주어졌고, 당신은 그것에 대해 그것이 효과가 없다고 코멘트한 것을 보았습니다.테스트해보니 효과가 있어서 이유를 잘 모르겠습니다.
여기서 진짜 문제는 웹킷(사파리, 크롬, ...)에 버그가 있다는 것입니다.페이지에 각각 [입력 유형="text" name="foo"...](즉, 속성 'name'에 대해 동일한 값을 갖는) [양식]이 둘 이상 있을 경우, 사용자가 페이지로 돌아오면 자동 채우기가 전송된 [양식]이 아닌 페이지의 FIRST [양식] 입력 필드에서 수행됩니다.두 번째로 NEXT [양식]이 자동으로 채워지는 등의 과정을 거칩니다.이름이 동일한 입력 텍스트 필드를 가진 [form]만 해당됩니다.
이것은 웹킷 개발자들에게 보고되어야 합니다.
오페라 오토는 올바른 형식을 채웁니다.
Firefox와 IE는 자동으로 채워지지 않습니다.
그래서 다시 말하지만, 이것은 웹킷의 버그입니다.
언급URL : https://stackoverflow.com/questions/2338102/override-browser-form-filling-and-input-highlighting-with-html-css
'itsource' 카테고리의 다른 글
| gdb의 메모리 범위를 보십니까? (0) | 2023.10.19 |
|---|---|
| 여러 테이블이 레일에서 결합 (0) | 2023.10.19 |
| mySQL 쿼리가 서버를 손상시키는 것 같습니다. (0) | 2023.10.19 |
| Objective-C에서 개체 크기 확인 (0) | 2023.10.19 |
| OpenCV 튜토리얼을 찾고 있습니다. (0) | 2023.10.19 |