Chrome স্বয়ংক্রিয়রূপে ইনপুট পটভূমির রঙ সরানো হচ্ছে?

650

যে ফর্মটিতে আমি কাজ করছি তাতে ক্রোম ইমেল এবং পাসওয়ার্ডের ক্ষেত্রগুলিকে স্বয়ংক্রিয়ভাবে পূরণ করে। এটি ঠিক আছে, তবে, ক্রোম ব্যাকগ্রাউন্ডের রঙকে ফ্যাকাশে হলুদ বর্ণে পরিবর্তন করে।

আমি যে নকশায় কাজ করছি তাতে অন্ধকার পটভূমিতে হালকা পাঠ্য ব্যবহার করা হচ্ছে, সুতরাং এটি প্রকৃত রূপটির চেহারাটি বিভ্রান্ত করছে - আমার গায়ে হলুদ বাক্স এবং অদৃশ্য সাদা টেক্সট রয়েছে। একবার ক্ষেত্রের উপর দৃষ্টি নিবদ্ধ করা হলে ক্ষেত্রগুলি স্বাভাবিক অবস্থায় ফিরে আসে।

এই ক্ষেত্রগুলির রঙ পরিবর্তন করে ক্রোমকে থামানো কি সম্ভব?

autocomplete  input  google-chrome 
— DisgruntledGoat
সূত্র
2
: এখানে আপনি ব্যাপকতর তথ্য stackoverflow.com/questions/2338102/...
— dasm
একটি অনুরূপ পোস্টে আমার উত্তর দেখুন: stackoverflow.com/a/13691346/336235
— এরনেস্টস কার্লসন

উত্তর:

1167

এটি দুর্দান্ত কাজ করে, আপনি ইনপুট বাক্সের শৈলীর পাশাপাশি ইনপুট বাক্সের অভ্যন্তরে পাঠ্য শৈলীও পরিবর্তন করতে পারবেন:

এখানে আপনি যেমন কোনো রঙ ব্যবহার করতে পারেন white, #DDD, rgba(102, 163, 177, 0.45)।

তবে transparentএখানে কাজ করবে না।

/* Change the white to any color ;) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

অতিরিক্ত হিসাবে, আপনি পাঠ্যের রঙ পরিবর্তন করতে এটি ব্যবহার করতে পারেন:

/*Change text in autofill textbox*/
input:-webkit-autofill {
    -webkit-text-fill-color: yellow !important;
}

পরামর্শ: শত বা হাজারে অতিরিক্ত ঝাপসা ব্যাসার্ধ ব্যবহার করবেন না। এটির কোনও লাভ নেই এবং দুর্বল মোবাইল ডিভাইসে প্রসেসরের লোড লাগতে পারে। (প্রকৃত পক্ষে, বাইরের ছায়ার ক্ষেত্রেও এটি সত্য)। 20px উচ্চতার একটি সাধারণ ইনপুট বাক্সের জন্য, 30px 'ব্লার ব্যাসার্ধ' পুরোপুরি এটি কভার করবে।

— ফরিদ অ্যালামনোরোতি
সূত্র
1
ক্রোম এখন ইউজার এজেন্ট স্টাইলশীট শো :-internal-autofill-previewedএবং :-internal-autofill-selectedপরিবর্তে pseudoclasses -webkit-autofill... রহস্যজনক তবে -webkit-autofillএখনও কাজ করে। আমার ব্যক্তিগতভাবে এর দরকার নেই !important।
— অ্যান্ডি
আমার হোভার / ফোকাস / সক্রিয় সিউডো সিলেক্টরগুলির প্রয়োজন নেই
— এন্টোইন 129
317

বাক্স-ছায়া যুক্ত করার পূর্ববর্তী সমাধানগুলি এমন লোকদের জন্য ভাল কাজ করে যাদের দৃ who় রঙের পটভূমি প্রয়োজন। একটি রূপান্তর যুক্ত করার অন্যান্য সমাধান কাজ করে, তবে একটি সময়সীমা / বিলম্ব নির্ধারণের অর্থ এটি হবে যে কোনও এক সময় এটি আবার দেখাতে পারে।

আমার সমাধানটি পরিবর্তে কীফ্রেমগুলি ব্যবহার করা হয়, এটি সর্বদা আপনার পছন্দগুলির রঙগুলি দেখায়।

@-webkit-keyframes autofill {
    0%,100% {
        color: #666;
        background: transparent;
    }
}

input:-webkit-autofill {
    -webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both;
}

উদাহরণ কোডেপেন: https://codepen.io/-Steve-/pen/dwgxPB

— স্টিভ
সূত্র
মোহন মত কাজ করে।
— লালনুন্টলুঙ্গা ছাকছূয়াক
1
এটি অবশ্যই কাজ করে! (ক্রোম 79)
— ল্যাশে
3
আমি এটি গ্রহণযোগ্য উত্তরের চেয়ে ভাল বলে মনে করি ... বাক্স-ছায়া পদ্ধতিটি চতুর এবং কাজ করে তবে কোনও ব্যবহারকারী যখন স্বতঃপূরণের মান নির্বাচন করে, তখন ডিফল্ট রঙ সংক্ষেপে ইনপুট ক্ষেত্রে ফ্ল্যাশ করবে, যা ঝামেলা হতে পারে can যদি আপনার ইনপুটগুলির গা dark় ব্যাকগ্রাউন্ড থাকে। এই সমাধানে এ জাতীয় কোনও সমস্যা নেই। চিয়ার্স!
— স্কিভিডব্রিত
পারফেক্ট! আমি প্রত্যাশার চেয়ে আরও ভাল কাজ করেছেন!
— এসডলিন্স
2
Vuetify 2 জন্য এই কাজ আপনি সেট বিশেষ করে যদিcolor: inherit
— মার্ক
275

আমার আরও ভাল সমাধান আছে।

নীচের মতো অন্য রঙে ব্যাকগ্রাউন্ড সেট করা আমার জন্য সমস্যার সমাধান করেনি কারণ আমার একটি স্বচ্ছ ইনপুট ক্ষেত্রের প্রয়োজন

-webkit-box-shadow: 0 0 0px 1000px white inset;

সুতরাং আমি আরও কিছু জিনিস চেষ্টা করেছিলাম এবং আমি এটি নিয়ে এসেছি:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
}
— নাথান হোয়াইট
সূত্র
7
দুর্দান্ত, আমারও স্বচ্ছ পটভূমি দরকার। PS: -webkit-text-fill-color: yellow !important;পাঠ্য রঙের জন্য ভুলবেন না
— gfpacheco
ইনপুটটি যখন লুকানো / দেখানো হয়েছে তখন এটি স্বতঃপূরণ পটভূমিটি প্রদর্শন করবে display। ফিডল - এটি দেখুন
— মার্টিন
27
পরিবর্তে স্থাপনের transition-durationহাস্যকর উচ্চ, এটা ভালো হতে সেট করতে হবে transition-delayপরিবর্তে। এইভাবে আপনি রঙগুলিতে কোনও পরিবর্তন হওয়ার সম্ভাবনা আরও কমিয়ে আনেন।
— শেগি
transitionহ্যাক শুধুমাত্র ব্রাউজার দ্বারা রেকর্ড করা একটি ডিফল্ট এন্ট্রি সঙ্গে যদি ইনপুট স্বয়ংক্রিয় ভরা হয় কাজ করবে, অন্যথায় হলুদ পটভূমিতে এখনও থাকবে।
— গুয়ারি
1
দুর্দান্ত সমাধান .... তবে কেন এই কাজ করে? এবং কেন সেটিং background-colorকাজ করে না? ক্রোমের এটি ঠিক করা দরকার !!
— তেত্রদেব
60

এটি আমার সমাধান, আমি রূপান্তর ও সংক্রমণ বিলম্ব ব্যবহার করেছি তাই আমার ইনপুট ক্ষেত্রে আমি স্বচ্ছ পটভূমি রাখতে পারি। 

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
    -webkit-transition-delay: 9999s;
}
— গাসলি ফ্রেয়ের স্বাভারসন
সূত্র
6
আমি ইনপুট ফিল্ডের ব্যাকগ্রাউন্ড হিসাবে একটি চিত্র সেট করেছি, এই সমাধানটি হলুদ ছায়াকে সরিয়ে দেয়, তবে পটভূমি চিত্রটি এখনও গোপন থাকে
— মাত্তেও তাসিনারি
এখন অবধি সেরা সমাধান, box-shadowবৈধতার জন্য বিদ্যমান সাথে দুর্দান্ত কাজ করে
— Yoan
ক্রোম বলেছে "color 9999s ease-out, background-color 9999s ease-out";ভ্যালাইড এক্সপশন নয়। আমি তখন কোডটি ব্যবহার করেছি -webkit-transition: background-color 9999s ease-out;এবং-webkit-text-fill-color: #fff !important;
— নানাসে
1
আমার জন্য ডাবল উক্তি ব্যতীত তবে কাজ করেছে;)
— জন
@ ইয়োন আপনার বিদ্যমান box-shadowবৈধতার সাথে এটি ঠিক কীভাবে কাজ করেছিল ? আমার ক্ষেত্রে, এই সিএসএস নিয়মের কারণে, আমার কাস্টম লাল বাক্সের ছায়াটি (যা একটি ইনপুট ত্রুটি নির্দেশ করে) বিলম্বিত হয়, ব্যবহারকারীকে বিশ্বাস করে যে সত্যই এটি ভাল তখন সবচেয়ে সাম্প্রতিক ইনপুটটি অবৈধ।
— পল রাজ্জান বার্গ
50

রঙিন আচরণটি ওয়েবকিট থেকে যেহেতু এটি তৈরি করা হয়েছে। এটি ব্যবহারকারীর ডেটা প্রিফিল্ড বোঝার অনুমতি দেয়। বাগ 1334

আপনি (বা নির্দিষ্ট ফর্ম নিয়ন্ত্রণে) করে স্ব-অসম্পূর্ণটি বন্ধ করতে পারেন:

<form autocomplete="off">
...
</form

অথবা আপনি এই করে অটোফিলের রঙ পরিবর্তন করতে পারেন:

input:-webkit-autofill {
    color: #2a2a2a !important;
}

দ্রষ্টব্য, এটি আবার কাজ করার জন্য একটি ত্রুটি ট্র্যাক করা হচ্ছে: http://code.google.com/p/chromium/issues/detail?id=46543

এটি একটি ওয়েবকিট আচরণ।

— মোহাম্মদ মনসুর
সূত্র
22
ধন্যবাদ তবে সেই ওয়েবকিট সিএসএস বিধি কাজ করছে না। ব্যবহারকারী এজেন্ট স্টাইলশিটটি সর্বদা পটভূমির রঙকে ওভাররুলিং করে, এমনকি এটি (ক) সেট করে !importantএবং (খ) উচ্চতর নির্দিষ্টতার জন্য একটি আইডি দিয়ে লক্ষ্যযুক্ত। দেখে মনে হচ্ছে ক্রোম সর্বদা এটিকে ওভাররাইড করে চলেছে। স্বতঃসিদ্ধ অপসারণ কাজ করে মনে হচ্ছে, তবে আমি যা করতে চাই তা আসলে তা নয়।
— অসন্তুষ্ট গোয়াট
1
কিছু লোকের একই সমস্যা রয়েছে, আপনি কি বাগ পোস্টটি পরীক্ষা করেছেন? কোড.google.com/p/chromium/issues/detail?id=1334
— মোহাম্মদ মনসুর
6
ক্রোম কোনও সিএসএসের সেই হলুদ বর্ণকে ওভাররাইড করার চেষ্টা করে। সেটিং autocomplete="off"অবশ্যই অ্যাক্সেসযোগ্যতার সমস্যা উত্থাপন করবে। কেন এই উত্তর সঠিকভাবে চিহ্নিত করা হয়েছে?
— জোও
2
এটি একটি ভাল সমাধান তবে আপনি যদি প্রতিক্রিয়া ব্যবহার করেন তবে এটি অভিযোগ করবে যে স্বতঃপূরণ একটি অজানা ডিওএম সম্পত্তি। অতএব, এটি আসলে স্বয়ংসম্পূর্ণ (নোটটি উটযুক্ত)।
— টিম স্কল্লিক
2
অটো সম্পূর্ণ বন্ধ করা হ্যাক একটি সমাধান নয়
— পাওলো
30

এই মুহুর্তের জন্য একটি সম্ভাব্য কাজটি ছায়ার অভ্যন্তরে "শক্তিশালী" সেট করা:

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: /*your box-shadow*/,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}
— ট্যামস পাপ
সূত্র
2
এই সমাধান যে আসলে কাজ, আমরা না হলুদ পটভূমিতে এড়িয়ে যেতে শুধুমাত্র কিছু গুণ, চান হিসাবে গৃহীত উত্তর স্থাপিত হবে।
— davidkonrad
22

লুকানোর স্বতঃপূরণ শৈলীর জন্য এটি ব্যবহার করে দেখুন

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    background-color: #FFFFFF !important;
    color: #555 !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #555555 !important;
    }
— ফ্রান্সিসকো কোস্টা
সূত্র
কৌতূহলের জন্য, পটভূমির রঙের কোনও প্রভাব নেই। ওয়েবেকিট-বাক্স-শ্যাডো এমন চালাক বিট যা ক্রোমে হলুদ ব্যাকগ্রাউন্ডকে ওভাররাইড করে
— জিউইস
19

উপরের সমস্ত উত্তর কাজ করেছে তবে তাদের ত্রুটি রয়েছে। নীচের কোডটি উপরের দুটি উত্তরের সংমিশ্রণ যা কোনও ঝলক না দিয়ে নিশ্চিন্তে কাজ করে।

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
— জ্যাক রাসেল
সূত্র
আমি ইনপুট ক্ষেত্রের ব্যাকগ্রাউন্ড হিসাবে একটি চিত্র স্থাপন করেছি, এই সমাধানটি হলুদ ছায়াকে সরিয়ে দেয়, তবে পটভূমি চিত্রটি এখনও লুকায়িত রয়েছে
— মাত্তেও তাসিনারি
এটি কেবলমাত্র এক ক্রোম 83. আমার জন্য কাজ সবচেয়ে ভোট এক ক্রোম 82. পর্যন্ত কাজ ছিল 'হল
— sdlins
19

Sass

input:-webkit-autofill

  &,
  &:hover,
  &:focus,
  &:active
    transition-delay: 9999s
    transition-property: background-color, color
— প্যাট্রিক ফিশার
সূত্র
1
এটি প্রকৃতপক্ষে আমার পক্ষে কাজ করেছে যেহেতু গৃহীত উত্তরটি ফ্যাকাশে হলুদ রঙের।
— ক্লিওর
সেরা সমাধান
— ইমো
15

2 ঘন্টা অনুসন্ধানের পরেও মনে হয় গুগল এখনও কোনওভাবে হলুদ রঙকে ওভাররাইড করে তবে আমি এর ঠিক করার জন্য। সেটা ঠিক. এটি হোভার, ফোকাস ইত্যাদির জন্যও কাজ করবে। আপনাকে যা করতে হবে তা এটির জন্য গুরুত্বপূর্ণ!

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

এটি সম্পূর্ণরূপে ইনপুট ক্ষেত্রগুলি থেকে হলুদ মুছে ফেলবে

— ডন
সূত্র
11

এক ঘন্টা দেরি যোগ করা ইনপুট উপাদানটিতে যে কোনও CSS পরিবর্তন থামিয়ে দেবে।
এটি রূপান্তর অ্যানিমেশন বা অভ্যন্তরীণ ছায়া যুক্ত করার চেয়ে আরও ভাল।

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
  transition-delay: 3600s;
}
— StefansArya
সূত্র
10

এটি ছাড়াও:

input:-webkit-autofill{
-webkit-box-shadow: 0 0 0px 1000px white inset;
}

আপনি যোগ করতে চাইবেন

input:-webkit-autofill:focus{
-webkit-box-shadow: 0 0 0px 1000px white inset, 0 0 8px rgba(82, 168, 236, 0.6);
}

অন্যান্য জ্ঞানবান, আপনি যখন ইনপুটটিতে ক্লিক করবেন তখন হলুদ বর্ণটি ফিরে আসবে। ফোকাসের জন্য, আপনি বুটস্ট্র্যাপ ব্যবহার করছেন, দ্বিতীয় অংশটি 0 0 8px rgba (82, 168, 236, 0.6) হাইলাইট করার সীমানার জন্য;

এটি কেবল যে কোনও বুটস্ট্র্যাপ ইনপুট মতো দেখায়।

— লিঙ্গুয়া জিন
সূত্র
10

আমার একটি সমস্যা ছিল যেখানে আমি বাক্স-ছায়া ব্যবহার করতে পারি না কারণ স্বচ্ছ হওয়ার জন্য আমার ইনপুট ক্ষেত্রটি প্রয়োজন। এটি কিছুটা হ্যাক তবে খাঁটি সিএসএস। খুব দীর্ঘ সময়ের মধ্যে রূপান্তর সেট করুন।

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
— অ্যালেক্স
সূত্র
এখন পর্যন্ত সর্বশেষতম ক্রোম 50.xx এ আইটি পুরোপুরি ঠিকঠাক কাজ করছে। অনেক ধন্যবাদ!
— বিবেককূপাধ্যায়
2
পরিবর্তে স্থাপনের transition-durationহাস্যকর উচ্চ, এটা ভালো হতে সেট করতে হবে transition-delayপরিবর্তে। এইভাবে আপনি রঙগুলিতে কোনও পরিবর্তন হওয়ার সম্ভাবনা আরও কমিয়ে আনেন।
— শেগি
@ শেগি ধন্যবাদ, আমি কেবল এটিকে বিলম্ব করে চলেছি। নিতান্তই ভালো.
— অ্যালেক্স
9

এটি ব্যবহার করে দেখুন: উপরের ছোটখাটো টুইটের সাথে উপরে @ নাথান-সাদা উত্তর।

/* For removing autocomplete highlight color in chrome (note: use this at bottom of your css file). */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: all 5000s ease-in-out 0s;
    transition-property: background-color, color;
}
— সুরেন্দ্র লোহিয়া
সূত্র
সমস্ত প্রতিক্রিয়া চেষ্টা করার পরে এটি সেরা উত্তর।
— gfcodix
8

আপনি যদি স্বতঃপূরণ কার্যকারিতা অক্ষত রাখতে চান তবে আপনি Chrome এর স্টাইলিং অপসারণ করতে কিছুটা jQuery ব্যবহার করতে পারেন। আমি এটি সম্পর্কে এখানে একটি ছোট পোস্ট লিখেছি: 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);
    });
});}
— বেঞ্জামিন
সূত্র
এটি সেরা সমাধান বলে মনে হচ্ছে, যদিও এটি কিকসেন্ডের মেলচেককে অবরুদ্ধ করে । এই চারপাশে কীভাবে কাজ করবেন সে সম্পর্কে কোনও ধারণা?
— জোও
এটি তখন থেকে গুগল ক্রোমের পাসওয়ার্ড অটো সম্পূর্ণরূপে কাজ করা বন্ধ করে দেওয়া ভাল সমাধান নয়। এটি প্রাথমিকভাবে আপনি নামটি পূরণ করেন এবং গুগল ক্রোম অটো পাসওয়ার্ডটি পূরণ করে। তবে উপরের জাভাস্ক্রিপ্ট একবার কার্যকর করলে নাম মুছে ফেলা হয়ে আবার সেট হয়ে যায় এবং অটো ভরা পাসওয়ার্ডটি হারিয়ে যায়
— ভ্যানভাল
6

আমি JQuery ছাড়াই জাভাস্ক্রিপ্ট ব্যবহার করে অন্য একটি সমাধান তৈরি করেছি। যদি আপনি এটি দরকারী মনে করেন বা আমার সমাধানটি পুনরায় পোস্ট করার সিদ্ধান্ত নেন তবে আমি কেবলমাত্র আপনাকে আমার নাম অন্তর্ভুক্ত করার জন্য বলি। উপভোগ করুন। - ড্যানিয়েল ফেয়ারওয়েথার

var documentForms = document.forms;

for(i = 0; i < documentForms.length; i++){
    for(j = 0; j < documentForms[i].elements.length; j++){
        var input = documentForms[i].elements[j];

        if(input.type == "text" || input.type == "password" || input.type == null){
            var text = input.value;
            input.focus();
            var event = document.createEvent('TextEvent');
            event.initTextEvent('textInput', true, true, window, 'a');
            input.dispatchEvent(event);
            input.value = text;
            input.blur();
        }
    }
}

এই কোডটির ভিত্তিতে তৈরি করা হয়েছে যে অতিরিক্ত পাঠ্য প্রবেশের সাথে সাথে গুগল ক্রোম ওয়েবকিট স্টাইলটি সরিয়ে ফেলে। কেবল ইনপুট ক্ষেত্রের মান পরিবর্তন করা যথেষ্ট নয়, ক্রোম একটি ইভেন্ট চায়। প্রতিটি ইনপুট ক্ষেত্রের (পাঠ্য, পাসওয়ার্ড) উপর দৃষ্টি নিবদ্ধ করে আমরা একটি কীবোর্ড ইভেন্ট (অক্ষর 'এ') প্রেরণ করতে পারি এবং তারপরে পাঠ্য মানটিকে পূর্ববর্তী অবস্থানে (স্বয়ংক্রিয়ভাবে ভরা পাঠ্য) সেট করতে পারি। মনে রাখবেন যে এই কোডটি প্রতিটি ব্রাউজারে চলবে এবং ওয়েবপৃষ্ঠার অভ্যন্তরে প্রতিটি ইনপুট ক্ষেত্রটি চেক করবে, আপনার প্রয়োজন অনুসারে এটিকে সামঞ্জস্য করবে।

— ড্যানিয়েল ফেয়ারওয়েদার
সূত্র
ভাল, এটি বেশিরভাগ অংশের জন্য কাজ করেছে .. এটি দুর্ভাগ্যক্রমে আমার পাসওয়ার্ড সাফ করে। প্রথমে পাসওয়ার্ডটি সংরক্ষণ করার জন্য এটি পাওয়ার চেষ্টা করছে এবং লুপগুলির পরে এটি পুনরায় সেট করুন তবে ক্রোমের সাথে এটিতে কিছু সমস্যা রয়েছে বলে মনে হচ্ছে। মিমি মিমি
— ডাস্টিন সিল্ক
6

আমার একটি খাঁটি সিএসএস সমাধান রয়েছে যা সিএসএস ফিল্টার ব্যবহার করে।

filter: grayscale(100%) brightness(110%);

গ্রেস্কেল ফিল্টার ধূসর দিয়ে হলুদ প্রতিস্থাপন করে, তারপরে উজ্জ্বলতা ধূসরকে মুছে দেয়।

কোড দেখুন

— 2ne
সূত্র
এটা আমার কাজ করে না?
— ইকেচুকুউ ইজে
5

এটি ইনপুট, টেক্সারিয়ার জন্য কাজ করবে এবং সাধারণ, হোভার, ফোকাস এবং সক্রিয় স্থানে নির্বাচন করবে। 

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active,
{
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

যারা এসএএসএস / এসসিএসএস নিয়ে কাজ করছেন তাদের জন্য উপরের সমাধানের এসসিএসএস সংস্করণ এখানে।

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill
{
    &, &:hover, &:focus, &:active
    {
        -webkit-box-shadow: 0 0 0px 1000px white inset !important;
    }
}
— ওয়াকাস আনোয়ার
সূত্র
SASS কোডের জন্য দুর্দান্ত একটি, এবং থেক্স!
— বার্নোল্লি আইটি
4

যারা কম্পাস ব্যবহার করছেন তাদের জন্য:

@each $prefix in -webkit, -moz {
    @include with-prefix($prefix) {
        @each $element in input, textarea, select {
            #{$element}:#{$prefix}-autofill {
                @include single-box-shadow(0, 0, 0, 1000px, $white, inset);
            }
        }
    }
}
— jedmao
সূত্র
3

আমি ছেড়ে!

যেহেতু স্বয়ংক্রিয়রূপে ইনপুটটির রঙ পরিবর্তন করার কোনও উপায় নেই আমি ওয়েবকিট ব্রাউজারগুলির জন্য jQuery দিয়ে সেগুলি সমস্ত অক্ষম করার সিদ্ধান্ত নিয়েছি। এটার মত:

if (/webkit/.test(navigator.userAgent.toLowerCase())) {
    $('[autocomplete="on"]').each(function() {
        $(this).attr('autocomplete', 'off');
    });
}
— ed1nh0
সূত্র
3

আপনি যদি গুগল ক্রোম থেকে অটোফিল আটকাতে চান তবে আমার একটি সমাধান পেয়েছে তবে এটি "সামান্য" লোড পরে তথ্য সঞ্চয়।

$(document).ready(function () {
    setTimeout(function () {
            var data = $("input:-webkit-autofill");
            data.each(function (i,obj) {
            $(obj).removeClass("input:-webkit-autofill");
                    obj.value = "";
            });
    },1);           
});
— নিকোলাস আরিয়াস
সূত্র
3

ড্যানিয়েল ফেয়ারওয়েদার এর সমাধান ( ক্রোম স্বয়ংক্রিয়রূপে ইনপুট ব্যাকগ্রাউন্ড রঙ মুছে ফেলা? ) (আমি তার সমাধানটিকে উপস্থাপন করতে পছন্দ করব, তবে এখনও 15 টি rep প্রয়োজন) সত্যিই ভাল কাজ করে। সর্বাধিক উন্নত সমাধানের সাথে সত্যিই বিশাল পার্থক্য রয়েছে: আপনি ব্যাকগ্রাউন্ডের চিত্রগুলি রাখতে পারেন! তবে কিছুটা পরিবর্তন (কেবল ক্রোম চেক)

এবং আপনার মনে রাখা দরকার, এটি কেবল দৃশ্যমান ক্ষেত্রগুলিতে কাজ করে !

সুতরাং আপনি যদি আপনার ফর্মের জন্য $। প্রদর্শন () ব্যবহার করে থাকেন তবে আপনার শো () ইভেন্টের পরে এই কোডটি চালানো দরকার

আমার সম্পূর্ণ সমাধান (লগইন ফর্মের জন্য আমার কাছে শো / লুকানোর বোতাম রয়েছে): 

 if (!self.isLoginVisible()) {
        var container = $("#loginpage");
        container.stop();
        self.isLoginVisible(true);
        if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

            var documentForms = document.forms;
            for (i = 0; i < documentForms.length; i++) {
                for (j = 0; j < documentForms[i].elements.length; j++) {
                    var input = documentForms[i].elements[j];

                    if (input.type == "text" || input.type == "password" || input.type == null) {
                        var text = input.value;
                        input.focus();
                        var event = document.createEvent('TextEvent');
                        event.initTextEvent('textInput', true, true, window, 'a');
                        input.dispatchEvent(event);
                        input.value = text;
                        input.blur();
                    }
                }
            }
        }

    } else {
        self.hideLogon();
    }

আবার দুঃখিত, আমি এটি একটি মন্তব্য হতে পছন্দ করব।

আপনি যদি চান তবে আমি যেখানে এটি ব্যবহার করেছি সেখানে একটি লিঙ্ক রাখতে পারি।

— Jurion
সূত্র
3

আমি উপরের প্রায় সব সমাধানের চেষ্টা করেছি। আমার পক্ষে কিছুই কাজ করে না। শেষ পর্যন্ত এই সমাধান নিয়ে কাজ করেছেন। আমি আশা করি কেউ এই সাহায্য করবে।

/* Change Autocomplete styles in Chrome*/
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 {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}
— সুহেল কেসি
সূত্র
এটি (আর কোনও কাজ করে না) এবং সিএসএস ট্রিকস বিটিডাব্লু থেকে অনুলিপি করা হয়েছিল
— বার্নল্লি IT
1
এটি আমার পক্ষে কাজ করেছে।
— আজিজ স্টার্ক
2

ধন্যবাদ বেনিয়ামিন!

মটুলস সমাধানটি আরও কিছুটা জটিল, কারণ আমি ব্যবহার করে ক্ষেত্রগুলি পেতে পারি না $('input:-webkit-autofill'), তাই আমি যা ব্যবহার করেছি তা নিম্নরূপ:

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {

  window.addEvent('load', function() {
    setTimeout(clearWebkitBg, 20);
    var elems = getElems();
    for (var i = 0; i < elems.length; i++) {
      $(elems[i]).addEvent('blur', clearWebkitBg);
    }
  });
}
function clearWebkitBg () {
  var elems = getElems();
  for (var i = 0; i < elems.length; i++) {
    var oldInput = $(elems[i]);
    var newInput = new Element('input', {
      'name': oldInput.get('name'),
      'id': oldInput.get('id'),
      'type': oldInput.get('type'),
      'class': oldInput.get('class'),
      'value': oldInput.get('value')
    });
    var container = oldInput.getParent();
    oldInput.destroy();
    container.adopt(newInput);
  }
}
function getElems() {
  return ['pass', 'login']; // ids
}
— এবং আমি
সূত্র
2

সমাধানগুলির কোনওটিই আমার পক্ষে কাজ করে নি, ইনসেট শ্যাডো আমার পক্ষে কাজ করবে না কারণ ইনপুটগুলির পৃষ্ঠার ব্যাকগ্রাউন্ডের উপর একটি অর্ধপরিচ্ছন্ন পটভূমি রয়েছে।

তাই আমি নিজেকে জিজ্ঞাসা করেছি, "প্রদত্ত পৃষ্ঠায় কী কী স্বয়ংক্রিয়ভাবে পূরণ করা উচিত Chrome কীভাবে নির্ধারণ করে?"

"এটি কী ইনপুট আইডি, ইনপুট নামগুলি সন্ধান করে? ফর্ম আইডি? ফর্ম ক্রিয়া?"

ব্যবহারকারীর নাম এবং পাসওয়ার্ড ইনপুটগুলির সাথে আমার পরীক্ষার মাধ্যমে, আমি কেবলমাত্র দুটি উপায় পেয়েছি যা ক্রোমকে স্বয়ংক্রিয়ভাবে পূরণ হওয়া ক্ষেত্রগুলি সন্ধান করতে সক্ষম করবে না:

1) পাঠ্য ইনপুট এর আগে পাসওয়ার্ড ইনপুট রাখুন। 2) তাদের একই নাম এবং আইডি দিন ... বা কোনও নাম এবং আইডি কোনও দিন না।

পৃষ্ঠাটি লোড হওয়ার পরে, জাভাস্ক্রিপ্টের সাহায্যে আপনি হয় পৃষ্ঠার ইনপুটগুলির ক্রমটি পরিবর্তনশীলভাবে পরিবর্তন করতে পারেন, বা তাদের নাম এবং আইডি গতিশীলভাবে দিতে পারেন ...

এবং ক্রোম জানে না যে এটি কী আঘাত করেছে ... স্বতঃসিদ্ধতা ভেঙে গেছে!

ক্রেজি হ্যাক, আমি জানি। তবে এটি আমার পক্ষে কাজ করছে।

Chrome 34.0.1847.116, ওএসএক্স 10.7.5

— আমি একটি
সূত্র
2

দুর্ভাগ্যক্রমে উপরোক্ত সমাধানগুলির কোনওটিই ২০১ none সালে আমার পক্ষে কাজ করেনি (প্রশ্নের কয়েক বছর পরে)

সুতরাং আমি যে আক্রমণাত্মক সমাধানটি ব্যবহার করি তা এখানে:

function remake(e){
    var val = e.value;
    var id = e.id;
    e.outerHTML = e.outerHTML;
    document.getElementById(id).value = val;
    return true;
}

<input id=MustHaveAnId type=text name=email autocomplete=on onblur="remake(this)">

মূলত, এটি মানটি সংরক্ষণ করার সময় ট্যাগটি মুছে দেয় এবং এটি পুনরায় তৈরি করে, তারপরে মানটিকে পিছনে ফেলে।

— FlorianB
সূত্র
ফ্রিড নামরোটির সমাধানটি আমার পক্ষে ক্রোম 51.0.2704.106 / ওএসএক্স 10.11.5 এ সূক্ষ্মভাবে কাজ করে।
— ওস
2

আমি এটি ব্যবহার করি আমার জন্য কাজ। ক্ষেত্রের হলুদ পটভূমি সরান।

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus
{
    -webkit-transition-delay: 99999s;
    -webkit-text-fill-color:#D7D8CE;
}
— আলী বাঘেরি
সূত্র
1

পূর্বে উল্লিখিত হিসাবে, আমার জন্য ইনসেট-ওয়েবেকিট-বক্স-ছায়া সবচেয়ে ভাল কাজ করে।

/* Code witch overwrites input background-color */
input:-webkit-autofill {
     -webkit-box-shadow: 0 0 0px 1000px #fbfbfb inset;
}

পাঠ্যের রঙ পরিবর্তন করতে কোড স্নিপেটও:

input:-webkit-autofill:first-line {
     color: #797979;
}
— গিডেরিয়াস ভাইকুস
সূত্র
1

এটি আমার পক্ষে কাজ করেছে:

padding: 5px;
background-clip: content-box;
— arczi
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.