Search code examples
cssopera

How to disable login/password highlighting in Opera?


Opera always orange highlights login/password inputs when user confirms "save password" prompt. It doesn't fit my design, is there any CSS way to alter/disable it?

Edit if not by CSS, is there any other solution?


Solution

  • Foolproof JS solution. It just duplicates username and password fields (with changed name=""), hide original ones and set them id=username_original, ... When form_submit is triggered, values from new visible fields are copied to old fields (which are hidden, but have name attribute - Opera wand will handle these).

    Additional CSS

    .hidden {
        position: absolute;
        width: 0; height: 0;
        overflow: hidden;
        visibility: hidden;
    }    
    

    JS

    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", func, false);
    }
    
    function func() {
        // duplicate input[id=username], set to original class=hidden
        var obj = document.getElementById("username"); 
        var newObj = obj.cloneNode(true);
        newObj.name = "";     
        obj.id += "_original";  
        obj.className = "hidden";
        obj.parentNode.insertBefore(newObj,obj);   
    
        // duplicate input[id=password], set to original class=hidden                                       
        var obj = document.getElementById("password"); 
        var newObj = obj.cloneNode(true);
        newObj.name = "";      
        obj.id += "_original";    
        obj.className = "hidden";
        obj.parentNode.insertBefore(newObj,obj);  
    
    
        document.getElementById("submit").onclick = formSubmit;
    }        
    
    function formSubmit() {
        if(document.getElementById("username_original").value != "") return; 
        else if(document.getElementById("username_original").value != document.getElementById("username").value) {
            document.getElementById("username_original").value = document.getElementById("username").value;
            document.getElementById("password_original").value = document.getElementById("password").value;
        }
        else return false;
    }
    

    HTML form

    <form action="" method="post" id="form"><div>   
        <input type="text" id="username" name="username" /><br />
        <input type="password" id="password" name="password" /><br />
        <input type="submit" id="submit" />
    </div></form>