2011-01-13 11 views
2

Opera always orangeは、ユーザーが「パスワードを保存」プロンプトを確認したときにログイン/パスワードの入力を強調表示します。それは私のデザインに合っていません、それを変更/無効にするCSSの方法はありますか?Operaでログイン/パスワードのハイライトを無効にする方法は?

CSSで編集しない場合は、他に解決策がありますか?

+2

ユーザーがブラウザウィンドウを閉じたときに私のWebページが常に表示されなくなります。これは私のデザインに合っていません。それを変更/無効にする方法はありますか? –

+2

@Cody Greyあなたのコメントはちょっと厳しいと思いますが、オレンジ色のハイライトは一部のデザインでうまく機能せず、別のカラーが適していると思います。ハイライトの視覚的な側面は調整可能でなければならないと主張し、したがってこの質問の使用を見ることができます。 IMHO – Bazzz

+0

私が見つけた唯一の解決策は、ログイン/パスワードの名前をランダムに変更することですが、これにより「パスワードを記憶する」機能が無効になります。その他の提案はありますか? –

答えて

1

Foolproof JSソリューション。それはusernameとpasswordフィールドを(名前を変更して "")変更し、元のものを隠してid = username_original、...を設定するだけです。名前属性を持っています - Opera wandがこれを処理します)。

追加の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 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> 
4

CSSでこれを無効にすることはできません - それは、あなたはまた、異なるボーダーの調整を試してみると遠く得ることはありません

:-)ブラウザの機能です:アウトラインは、ハイライトの周りの領域に影響を与え、インセットボックス - 影、背景色などがその下に表示されます。

+0

+1正しい。 CSSを使用して、ユーザーのコンピュータで実行されているアプリケーションを変更または変更することはできません。 (ありがとうございます) –

+0

ブラウザの機能をCSSで変更することはできません。つまり、「resize:none;」がない限り、Chromeのtextareasはサイズ変更可能です。 CSSプロパティが適用されます。 Lookはブラウザの機能ではありません。テキストボックスはすべてのページで異なりますが、その動作は同じです:アウトラインの色を変更することは合理的な必要なのですか?そうではありませんか? –

+0

@janTuron:Andreasが言っていることは、モーダルウィンドウがブラウザのクロムの一部であるWebサイトの一部ではないということです。したがって、WebページのCSSとスクリプトのコンテキストからはアクセスできません。 – karlcow

関連する問題