एक ऑटोफिल इनपुट पर क्रोम छिपाने की पृष्ठभूमि छवि और रंग से कैसे बचें

Question

क्रोम ब्राउज़र स्वत: भरण के प्रभाव से हटाया background-colorऔर background-imageसे UsernameऔरPassword इनपुट फ़ील्ड।

स्वत: पूर्ण होने से पहले

स्वत: पूर्ण होने के बाद

लेकिन क्रोम ब्राउज़र स्वत: पूर्णता के मेरे आइकॉन को इनपुट्स से छिपा देता है और उसने मुझे बदल भी दिया है background-color। इसलिए मुझे अपने आइकॉन को इनपुट पर बने रहने की आवश्यकता है क्योंकि यह है।

Chrome ब्राउज़र को फ़ील्ड के पृष्ठभूमि रंग बदलने और छवियों को छिपाने से रोकना संभव है ?

.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>

Comments

अगर आप हमें कुछ कोड उदाहरण देते हैं तो हम आपकी मदद कर सकते हैं, बिना कोड के आपको यह बताना मुश्किल है कि क्या करना है

— इवान

क्या आप क्रोम स्वतः पूर्ण नहीं रोक सकते थे?

— मयंक पटेल

आप autocomplete="off"इनपुट टैग में उपयोग कर सकते हैं ।

— होप

क्या आपने अपने सीएसएस में उपयोग किया है?

— ट्विंकल शर्मा

चेक आई साझा कोड और मेल इनपुट पर डबल क्लिक करें और नीचे दी गई सूची में से एक का चयन करें, आप समस्या पा सकते हैं।

— जिग्नेश पांचाल

Answer 1

यहाँ आप जैसे किसी भी रंग का उपयोग कर सकते 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>

Comments

जब मैं इस समाधान का उपयोग करता हूं तो अपने आइकन छिपाएं। कृपया प्रश्न में साझा किए गए कोड की जांच करें।

— जिग्नेश पांचाल

क्या हम imgटैग में इमेज के रूप में बैकग्राउंड-आईएमजी का उपयोग कर सकते हैं ?

— प्रतीक्षारत

@JigneshPanchal मैंने अपडेट किया मेरा जवाब कृपया एक नज़र है और मुझे बताएं कि क्या आपको कोई मुद्दा मिला है।

— प्रतीक्षारत

लेकिन क्या यह संभव है कि सीएसएस को ओवरराइड करने के लिए क्रोम को रोक दिया जाए।

— जिग्नेश पांचाल

ऐसा नहीं है, केवल आप ही कुछ हैक्स रेफरी के लिए शैली आपको लगता है कि बनाने के लिए उच्च पूर्व पर चाहते ओवरराइड करने के लिए कोशिश कर सकते हैं और यह भी का उपयोग करें 'महत्वपूर्ण' stackoverflow.com/questions/15738259/disabling-chrome-autofill

— ओवैस

Answer 2

आप स्वतः पूर्ण कोड को ओवरराइड नहीं कर सकते , क्योंकि यह उपयोगकर्ता एजेंट स्टाइलशीट द्वारा नियंत्रित किया जा रहा है , अधिक जानने के लिए कैस्केडिंग-ऑर्डर पर एक नज़र डालें ।

यहाँ वह कोड है (जो मैंने Google क्रोम से कॉपी किया है ) जो आपके आइकन को स्वतः पूर्ण पर गायब कर रहा है, बस उसी स्थिति में जब आप अनुभव कर रहे थे :

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>

Answer 3

कृपया जांचें कि क्या यह आपके लिए काम करता है। मैंने आपके कोड में कुछ बदलाव किए हैं।

आप इस 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;
}

Answer 4

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

Chrome स्वत: पूर्ण के लिए इनपुट पृष्ठभूमि रंग हटाने से @Fareed Alnamrouti को क्रेडिट ?

Answer 5

आइए इस कोड की कोशिश करें, आशा है कि यह आपके लिए उपयोगी होगा

.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>

अगर आप बैकग्राउंड कलर हटाना चाहते हैं, तो कीफ्रेम स्टाइल में डिफॉल्ट बैकग्राउंड-कलर जोड़ें