ฉันจะหยุด Chrome จากการใส่กล่องสีเหลืองของเว็บไซต์ได้อย่างไร

ท่ามกลางข้อความและภาพอื่น ๆ ที่เป็นโรคเอดส์ในการส่งแบบฟอร์มการตรวจสอบภายหลังฉันกำลังระบายสีกล่องอินพุตของฉันเป็นสีแดงเพื่อบ่งบอกถึงพื้นที่โต้ตอบที่ต้องการความสนใจ

บน Chrome (และสำหรับผู้ใช้แถบเครื่องมือ Google) คุณสมบัติเติมอัตโนมัติจะเปลี่ยนสีรูปแบบการป้อนของฉันเป็นสีเหลือง นี่คือปัญหาที่ซับซ้อน: ฉันต้องการให้สมบูรณ์แบบอัตโนมัติอนุญาตในแบบฟอร์มของฉันมันความเร็วผู้ใช้เข้าสู่ระบบฉันจะตรวจสอบความสามารถในการเปิดคุณลักษณะการเติมข้อความอัตโนมัติให้ปิดถ้า / เมื่อมีข้อผิดพลาดทริกเกอร์ แต่มันซับซ้อน บิตของการเข้ารหัสเพื่อปิดโดยอัตโนมัติทางโปรแกรมสำหรับการป้อนข้อมูลที่ได้รับผลกระทบเดียวในหน้า นี่มันง่ายมากที่จะปวดหัว

ดังนั้นเพื่อพยายามหลีกเลี่ยงปัญหานั้นมีวิธีใดที่ง่ายกว่าในการหยุด Chrome จากการเปลี่ยนสีกล่องอินพุตอีกครั้งหรือไม่

[แก้ไข] ฉันลองใช้! ข้อเสนอแนะที่สำคัญด้านล่างและไม่มีผลใด ๆ ฉันยังไม่ได้ตรวจสอบ Google Toolbar เพื่อดูว่าคุณลักษณะ! สำคัญจะใช้งานได้หรือไม่

เท่าที่ฉันสามารถบอกได้ไม่มีวิธีอื่นใดนอกเหนือจากการใช้แอตทริบิวต์การเติมข้อความอัตโนมัติ (ซึ่งดูเหมือนจะใช้งานได้)

ฉันรู้ใน Firefox คุณสามารถใช้ attribute 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: แทนที่ขอบเขตอัตโนมัติของ Chrome รอบ ๆ ฟิลด์ที่ใช้งานอยู่โดยใช้ CSS )

ใช่มันจะปวดหัวที่สำคัญซึ่งในความคิดของฉันไม่คุ้มค่าตอบแทน บางทีคุณอาจปรับแต่งกลยุทธ์ UI ของคุณเล็กน้อยและแทนที่จะระบายสีกล่องสีแดงคุณสามารถระบายสีเส้นขอบสีแดงหรือใส่เทปสีแดงเล็ก ๆ ไว้ข้างๆมัน (เช่นเทป "กำลังโหลด" gmails) ซึ่งจางหายไปเมื่ออยู่ในกล่อง โฟกัส

มันเป็นเค้กชิ้นหนึ่งที่มี 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 เล็กน้อย ฉันกำลังใช้ $ (เอกสาร). Ready () แทนที่จะเป็น $ (หน้าต่าง) .load () ดูเหมือนว่าจะทำงานได้ดีขึ้นสำหรับฉัน - ตอนนี้มี FOUC น้อยกว่ามาก ฉันไม่เชื่อว่ามีและข้อเสียในการใช้ $ (เอกสาร) .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 สำหรับ textareas ด้วย:

textarea:focus { outline:none; }

นอกจากนี้อาจดูเหมือนชัดเจนที่สุด แต่สำหรับผู้เริ่มต้นคุณสามารถตั้งค่าเป็นสีเช่น:

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

หากฉันจำได้อย่างถูกต้องกฎสำคัญ! ในสไตล์ชีทสำหรับสีพื้นหลังของอินพุตจะแทนที่การเติมข้อความในแถบเครื่องมือของ Google โดยอัตโนมัติ - สันนิษฐานว่าคงเหมือนกันกับ Chrome