কীভাবে Chrome একটি স্বয়ংক্রিয় ইনপুট জুড়ে পটভূমির চিত্র এবং রঙ লুকান to

13

Chrome ব্রাউজার স্বতঃপূর্ণ মুছে প্রভাব background-colorএবং background-imageথেকে Usernameএবং Passwordইনপুট ক্ষেত্রে।

স্বতঃসিদ্ধ হওয়ার আগে

এখানে চিত্র বর্ণনা লিখুন

স্বতঃসিদ্ধ হওয়ার পরে

এখানে চিত্র বর্ণনা লিখুন

তবে ক্রোম ব্রাউজারটি স্বয়ংক্রিয়ভাবে আমার আইকনগুলি ইনপুটগুলি থেকে আড়াল করে এবং আমার পরিবর্তন করে background-color। সুতরাং আমার আইকনগুলি যেমন হয় তেমন ইনপুটগুলিতে থাকা দরকার।

ক্ষেত্রগুলির ব্যাকগ্রাউন্ডের রঙ পরিবর্তন এবং চিত্রগুলি লুকানো থেকে ক্রোম ব্রাউজারকে থামানো কি সম্ভব ?

.form-section .form-control {
	border-radius: 4px;
	background-color: #f7f8fa;
	border: none;
	padding-left: 62px;
	height: 51px;
	font-size: 16px;
	background-repeat: no-repeat;
	background-position: left 17px center;
}

.form-section .form-control:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.form-section .form-group {
	margin-bottom: 21px;
}

.form-section .form-control[type="email"] {
	background-image: url('https://i.stack.imgur.com/xhx3w.png');
}

.form-section .form-control[type="password"] {
	background-image: url('https://i.stack.imgur.com/910l0.png');
}

.form-btn {
  padding:10px;
    background-color: #65a3fe;
    border: none;
    color: #ffffff;    
    font-size: 18px;
    font-weight: 700;
}
<div class="form-section">
    <form>                                 
        <div class="form-group">
            <input title="Email" type="email" class="form-control" name="email" placeholder="Your email address" value="">
		</div>
        <div class="form-group">
            <input title="Password" type="password" class="form-control" name="password" placeholder="Your Password">
		</div>
        <button type="submit" class="btn btn-primary form-btn">Log in</button>
    </form>
</div>
স্নিপেট প্রসারিত করুন

javascript  html  css  google-chrome 
— জিগনেশ পঞ্চাল
সূত্র
1
আপনি যদি আমাদের কিছু কোড উদাহরণ দেন তবে আমরা আপনাকে সহায়তা করার চেষ্টা করতে পারি, কোড ছাড়াই আপনাকে কী করা উচিত তা বলা শক্ত
— ইভান
আপনি কি ক্রোম স্বয়ংক্রিয়রূপ বন্ধ করতে পারবেন না?
— মায়াঙ্ক প্যাটেল
আপনি autocomplete="off"ইনপুট ট্যাগ ব্যবহার করতে পারেন ।
— আশা করি
আপনি কি ব্যবহার করেছেন! আপনার সিএসএসে গুরুত্বপূর্ণ?
— টুইঙ্কল শর্মা
আই শেয়ার্ড কোডটি পরীক্ষা করুন এবং মেল ইনপুটটিতে ডাবল ক্লিক করুন এবং নীচের প্রস্তাবিত তালিকার মধ্যে একটি নির্বাচন করুন, আপনি সমস্যাটি খুঁজে পেতে পারেন।
— জিগনেশ পঞ্চাল

উত্তর:

8

এখানে আপনি যেমন কোনো রঙ ব্যবহার করতে পারেন 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;
}

আপনার সমাধান: (উপরের ক্ষেত্রে)

divআইকন এবং জন্য পৃথক ব্যবহার করুনinput

.form-section .form-control {
	
	font-size: 16px;
  width: 100%;
  margin-left: 9px;
}

.form-section .form-control:focus {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.form-section .form-group {
	margin-bottom: 21px;
}

.icon-email {
	background-image: url('https://i.stack.imgur.com/xhx3w.png');
  background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: auto;
}

.icon-pass {
	background-image: url('https://i.stack.imgur.com/910l0.png');
  background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: auto;
}

.form-btn {
  padding:10px;
    background-color: #65a3fe;
    border: none;
    color: #ffffff;    
    font-size: 18px;
    font-weight: 700;
}

.input-txt{
    padding-left: 5px;
    float:left;
    border-left:none;
    outline:none ;
    border: none;
    background-color: #f7f8fa;
}

.custom-input {
    display: flex; 
    border-radius: 4px;
	background-color: #f7f8fa !important;
	border: none;
	height: 51px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px #f7f8fa inset !important;
}
<div class="form-section">
    <form>                                 
        <div class="form-group custom-input">
        <div class='icon-email'></div>
            <input title="Email" type="email" class="form-control input-txt" name="email" placeholder="Your email address" value="">
		</div>
        <div class="form-group  custom-input">
        <div class='icon-pass'></div>
            <input title="Password" type="password" class="form-control input-txt" name="password" placeholder="Your Password">
		</div>
        <button type="submit" class="btn btn-primary form-btn">Log in</button>
    </form>
</div>
স্নিপেট প্রসারিত করুন

— Awais
সূত্র
আমি যখন এই সমাধানটি ব্যবহার করি তখন এটি আমার আইকনগুলি আড়াল করে। আমি প্রশ্নে ভাগ করে নেওয়া কোড চেক করুন।
— জিগনেশ পঞ্চাল
আমরা কি imgট্যাগ হিসাবে ব্যাকগ্রাউন্ড-ইমগ ব্যবহার করতে পারি ?
— ওউইস
@ জিগনেশপঞ্চল আমি আমার উত্তরটি আপডেট করেছি দয়া করে একবার দেখুন এবং আপনার কোনও সমস্যা আছে কিনা তা আমাকে জানান।
— ওউইস
তবে এটি কি সিএসএসের ওভাররাইডে ক্রম বন্ধ করা সম্ভব?
— জিগনেশ পঞ্চাল 13
ঠিক নয়, কেবল আপনি কিছু হ্যাক চেষ্টা করতে পারেন এবং রেফ স্ট্যাকওভারফ্লো
— আওস
1

আপনি স্বতঃপূরণ কোডটি ওভাররাইড করতে পারবেন না , যেহেতু এটি ব্যবহারকারী এজেন্ট স্টাইলশিট দ্বারা নিয়ন্ত্রিত হচ্ছে , আরও জানতে ক্যাসকেডিং-ক্রমটি দেখুন।

এই কোডটি ( আমি গুগল ক্রোম থেকে অনুলিপি করেছি ) এখানে দেওয়া হয়েছে যা আপনার আইকনগুলি স্বতঃপূরণে অদৃশ্য করে তুলছে, কেবল যদি আপনি ভাবছিলেন তবে :

input:-internal-autofill-selected {
      background-color: rgb(232, 240, 254) !important;
      background-image: none !important;
      color: -internal-light-dark-color(black, white) !important;
    }

এখন কি? যদি আপনি এখানে আইকনগুলি অদৃশ্য হয়ে যাওয়ার সমস্যা সমাধানের উদ্দেশ্যে থাকেন তবে এমন একটি হ্যাক যা আপনি এটি করতে পারেন:

.form-section .form-control {
  border-radius: 4px;
  background-color: #f7f8fa;
  border: none;
  padding-left: 62px;
  height: 51px;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: left 17px center;
}

.form-section .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-section .form-group {
  margin-bottom: 21px;
  position: relative;
}

.form-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.form-section .form-control[type="password"] {
  background-image: url('https://i.stack.imgur.com/910l0.png');
}

.form-btn {
  padding: 10px;
  background-color: #65a3fe;
  border: none;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
}
<div class="form-section">
<form>
  <div class="form-group">
    <input title="Email" type="email" class="form-control" name="email" placeholder="Your email address" value="">

    <img class="form-icon" src="https://i.stack.imgur.com/xhx3w.png" alt="">
  </div>
  <div class="form-group">
    <input title="Password" type="password" class="form-control" name="password" placeholder="Your Password">
  </div>
  <button type="submit" class="btn btn-primary form-btn">Log in</button>
</form>
</div>
স্নিপেট প্রসারিত করুন

— kuroyza
সূত্র
1

এটি আপনার পক্ষে কাজ করে কিনা তা পরীক্ষা করে দেখুন। আমি আপনার কোডে কিছু পরিবর্তন করেছি।

আপনি এই jsfiddle চেক করতে পারেন

<div class="form-section">
  <form>
    <div class="form-group control">
      <input title="Email" type="email" class="form-control email" name="email" placeholder="Your email address" value="">
      <span class='input-icon'></span>
    </div>
    <div class="form-group control">
      <input title="Password" type="password" class="form-control pass" name="password" placeholder="Your Password">
      <span class='input-icon'></span>
    </div>
    <button type="submit" class="btn btn-primary form-btn">Log in</button>
  </form>
</div>


.form-section .form-control {
    border-radius: 4px;
    background-color: #f7f8fa;
    border: none;
    padding-left: 62px;
    height: 51px;
    font-size: 16px;
    background-repeat: no-repeat;
    background-position: left 17px center;
}

.form-section .form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.form-section .form-group {
    margin-bottom: 21px;
}

.form-btn {
  padding:10px;
    background-color: #65a3fe;
    border: none;
    color: #ffffff;    
    font-size: 18px;
    font-weight: 700;
}

.control {
    position: relative;
}

.email .pass {
    padding-left: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 16px;
}

.email ~ .input-icon {
    background-image: url('https://i.stack.imgur.com/xhx3w.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    width: 22px;
    height: 14px;
    position: absolute;
    left: 8px;
    bottom: 0;
    top: 0;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;

}
.pass ~ .input-icon {
  background-image: url('https://i.stack.imgur.com/910l0.png');  
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    width: 22px;
    height: 14px;
    position: absolute;
    left: 8px;
    bottom: 0;
    top: 0;
    margin: auto;
    padding-top: 5px;
    padding-bottom: 5px;
}

jsfiddle উদাহরণ

— কোয়েথেল দাজা
সূত্র
0 
/* 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;
}


/*Additionally, you can use this to change the text color:*/

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

ক্রোম স্বপূরণে ইনপুট ব্যাকগ্রাউন্ডের রঙ সরানো থেকে @ ফরিদ অ্যালামনোউটিকে ক্রেডিট ?

— আবদেলরহমান গোবরঃ
সূত্র
0

আসুন এই কোডটি চেষ্টা করুন, আশা করি এটি আপনার পক্ষে সহায়ক হবে 

.form-section .form-control {
  border-radius: 4px;
  background-color: #f7f8fa;
  border: none;
  padding-left: 62px;
  height: 51px;
  font-size: 16px;
  background-repeat: no-repeat;
  background-position: left 17px center;
}

.form-section .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-section .form-group {
  margin-bottom: 21px;
}

.form-section .form-control[type="email"] {
  background-image: url('https://i.stack.imgur.com/xhx3w.png');
}

@-webkit-keyframes autofill_email {
  to {
    background-image: url('https://i.stack.imgur.com/xhx3w.png');
  }
}

.form-section .form-control[type="email"]:-webkit-autofill {
  -webkit-animation-name: autofill_email;
  -webkit-animation-fill-mode: both;
}

.form-section .form-control[type="password"] {
  background-image: url('https://i.stack.imgur.com/910l0.png');
}

@-webkit-keyframes autofill_pass {
  to {
    background-image: url('https://i.stack.imgur.com/910l0.png');
  }
}

.form-section .form-control[type="password"]:-webkit-autofill {
  -webkit-animation-name: autofill_pass;
  -webkit-animation-fill-mode: both;
}

.form-btn {
  padding: 10px;
  background-color: #65a3fe;
  border: none;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
} 
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="py-4">
  <div class="container">
    <div class="form-section">
      <form>
        <div class="form-group">
          <input title="Email" type="email" class="form-control" name="email" placeholder="Your email address" value="">
        </div>
        <div class="form-group">
          <input title="Password" type="password" class="form-control" name="password" placeholder="Your Password">
        </div>
        <button type="submit" class="btn btn-primary form-btn">Log in</button>
      </form>
    </div>
  </div>
</section>
স্নিপেট প্রসারিত করুন

আপনি যদি ব্যাকগ্রাউন্ডের রঙ মুছে ফেলতে চান, তবে কীফ্রেম স্টাইলে ডিফল্ট ব্যাকগ্রাউন্ড-রঙ যুক্ত করুন

— লিবিন প্রসন্ত
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.