BinaryDevelop
  1. ホーム
  2. html

[解決済み] HTML/CSSでブラウザのフォーム入力と入力ハイライトをオーバーライドする

2022-04-27 10:39:18

質問

サインインとサインアップの2つの基本フォームを同じページに置いています。現在、サインインフォームの自動入力には問題がないのですが、サインアップフォームの自動入力に問題があります。 しかし、サインアップフォームも同様に自動入力され、私はそれが好きではありません。

また、フォームのスタイルが黄色の背景になってしまいますが、どうにもこうにも上書きできませんし、インラインCSSを使用して上書きするのも嫌です。どうすれば黄色くならないようにできますか？ と（おそらく）自動充填 ?

解決方法は？

を使用すると、オートコンプリートができます。 

<form autocomplete="off">

カラーリング問題に関して。

スクリーンショットから、webkit が次のようなスタイルを生成していることがわかります。 

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

1) #id-styles は .class スタイルよりもさらに重要であるため、次のようにします。 かもしれません が働きます。 

#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/javascriptによる解決策。

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);
        });
    });
}

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します