วิธีหลีกเลี่ยง Chrome ซ่อนภาพพื้นหลังและสีบนอินพุตที่ป้อนอัตโนมัติ

13

Chrome Browserเติมเอฟเฟกต์ที่ลบออกโดยอัตโนมัติของbackground-colorและbackground-imageจากUsernameและPasswordช่องป้อนข้อมูล

ก่อนเติมข้อความอัตโนมัติ

หลังจากเติมข้อความอัตโนมัติ

แต่การเติมข้อความอัตโนมัติของChrome Browserซ่อนไอคอนของฉันจากอินพุตและเปลี่ยนของฉันbackground-colorด้วย ดังนั้นฉันต้องการไอคอนของฉันอยู่ในอินพุตเหมือนเดิม

เป็นไปได้ไหมที่จะหยุดChrome Browserจากการเปลี่ยนสีพื้นหลังของฟิลด์และซ่อนภาพ?

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

ขยายตัวอย่างข้อมูล

— Jignesh Panchal
แหล่งที่มา

1

หากคุณให้ตัวอย่างรหัสแก่เราเราสามารถลองช่วยคุณได้โดยไม่ต้องใช้รหัสยากที่จะบอกคุณว่าจะต้องทำอย่างไร

— Ivan

คุณไม่สามารถหยุดการเติมข้อความอัตโนมัติของ Chrome ได้หรือไม่?

— Mayank Patel

คุณสามารถใช้autocomplete="off"ในแท็กอินพุต

— หวังว่า

คุณใช้! สำคัญใน css ของคุณหรือไม่

— Twinkle Sharma

ตรวจสอบ i รหัสที่ใช้ร่วมกันและดับเบิลคลิกที่การป้อนจดหมายและเลือกหนึ่งรายการจากด้านล่างรายการแนะนำคุณสามารถค้นหาปัญหา

— Jignesh Panchal

8

ที่นี่คุณสามารถใช้เช่นสีใด ๆwhite, ,#DDDrgba(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
แหล่งที่มา

เมื่อฉันใช้โซลูชันนี้ซ่อนไอคอนของฉัน โปรดตรวจสอบรหัสที่ฉันแบ่งปันในคำถาม

— Jignesh Panchal

เราสามารถใช้ background-img เป็นภาพในimgแท็กได้หรือไม่

— Awais

@ JigneshPanchal ฉันได้รับคำตอบของฉันโปรดดูและจะแจ้งให้เราทราบหากคุณมีปัญหาใด ๆ

— Awais

แต่มันเป็นไปได้ที่จะหยุดโครเมี่ยมเพื่อแทนที่มันเป็น CSS

— Jignesh Panchal

ไม่เฉพาะคุณเท่านั้นที่สามารถลองแฮ็กบางส่วนและใช้ '! สำคัญ' เพื่อแทนที่สไตล์ที่คุณต้องการก่อนหน้านี้สำหรับการอ้างอิงstackoverflow.com/questions/15738259/disabling-chrome-autofill

— Awais

1

คุณไม่สามารถแทนที่รหัสเติมข้อความอัตโนมัติเนื่องจากมันถูกควบคุมโดยสไตล์ชีทของเอเจนต์ผู้ใช้ลองดูลำดับการเรียงซ้อนเพื่อทราบเพิ่มเติม

นี่คือรหัส ( ฉันคัดลอกมาจาก google chrome ) ที่ทำให้ไอคอนของคุณหายไปจากการเติมข้อความอัตโนมัติในกรณีที่คุณสงสัย :

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

— Quethzel Díaz
แหล่งที่มา

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

ต้องการเครดิต @Fareed Alnamrouti จากการลบสีพื้นหลังของการป้อนข้อมูลอัตโนมัติหรือไม่

— Abdelrahman Gobarah
แหล่งที่มา

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>

ขยายตัวอย่างข้อมูล

หากคุณต้องการลบสีพื้นหลังให้เพิ่มสีพื้นหลังเริ่มต้นในรูปแบบคีย์เฟรม

— Libin Prasanth
แหล่งที่มา