Cách tránh Chrome ẩn hình ảnh và màu nền trên đầu vào tự động điền

13

Trình duyệt Chrome tự động điền hiệu ứng đã xóa background-colorvà background-imagetừ Usernamevà Passwordcác trường nhập.

Trước khi tự động hoàn thành

nhập mô tả hình ảnh ở đây

Sau khi tự động hoàn thành

nhập mô tả hình ảnh ở đây

Nhưng Trình duyệt Chrome tự động hoàn tất ẩn các biểu tượng của tôi khỏi đầu vào và cũng thay đổi background-color. Vì vậy, tôi cần các biểu tượng của tôi ở trên đầu vào như nó là.

Có thể ngăn Trình duyệt Chrome thay đổi màu nền của các trường và ẩn hình ảnh không?

.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>
Mở rộng đoạn trích

javascript  html  css  google-chrome 
— Jignesh Panchal
nguồn
1
nếu bạn cho chúng tôi một số ví dụ về mã, chúng tôi có thể thử giúp bạn, không có mã thì khó có thể cho bạn biết phải làm gì
— Ivan
Bạn có thể không dừng chrome tự động hoàn thành?
— Mayank Patel
bạn có thể sử dụng autocomplete="off"trong thẻ đầu vào.
— Hy vọng
Bạn đã sử dụng! Quan trọng trong css của bạn?
— Twinkle Sharma
Kiểm tra i mã được chia sẻ và nhấp đúp chuột vào đầu vào thư và chọn một từ danh sách được đề xuất bên dưới, bạn có thể tìm thấy vấn đề.
— Jignesh Panchal

Câu trả lời:

8

Ở đây bạn có thể sử dụng bất kỳ màu nào white, ví dụ #DDD, rgba(102, 163, 177, 0.45).

Đối với Nền: transparentsẽ không hoạt động ở đây vì vậy vui lòng sử dụng màu sắc.

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

cho màu văn bản:

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

Giải pháp của bạn: (đối với trường hợp trên)

Sử dụng riêng divcho biểu tượng và choinput

.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>
Mở rộng đoạn trích

— Awais
nguồn
Khi tôi sử dụng giải pháp này, nó ẩn các biểu tượng của tôi. vui lòng kiểm tra mã tôi chia sẻ trong câu hỏi.
— Jignesh Panchal
Chúng ta có thể sử dụng nền-img làm hình ảnh trong imgthẻ không?
— Awais
@JigneshPanchal Tôi đã cập nhật câu trả lời của mình xin vui lòng xem và làm cho tôi biết nếu bạn có bất kỳ vấn đề.
— Awais
Nhưng nó có thể dừng chrome để ghi đè lên nó không.
— Jignesh Panchal
Không chính xác, Chỉ bạn mới có thể thử một số hack và cũng có thể sử dụng '! Quan trọng' để ghi đè lên phong cách mà bạn muốn thực hiện ở mức cao trước ref stackoverflow.com/questions/15738259/diseac-chrom-autofill
— Awais
1

Bạn KHÔNG THỂ ghi đè mã tự động hoàn tất, vì nó được kiểm soát bởi biểu định kiểu tác nhân người dùng , hãy xem thứ tự xếp tầng để biết thêm.

Đây là mã ( tôi đã sao chép từ google chrome ) đang làm cho các biểu tượng của bạn biến mất khi tự động hoàn tất, chỉ trong trường hợp bạn đang tự hỏi :

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

Giờ thì sao? Nếu bạn đang có ý định giải quyết các biểu tượng biến mất thì đây là một hack mà bạn có thể làm điều đó cho bạn:

.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>
Mở rộng đoạn trích

— Kuroyza
nguồn
1

Vui lòng kiểm tra nếu điều này làm việc cho bạn. Tôi đã thực hiện một số thay đổi về mã của bạn.

Bạn có thể kiểm tra trong jsfiddle này

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

ví dụ jsfiddle

— Quethzel Díaz
nguồn
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;
}

Tín dụng cho @Fareed Alnamrouti khỏi Xóa màu nền đầu vào cho tự động hoàn thành Chrome?

— Abdelrahman yêu tinh
nguồn
0

Hãy thử mã này, hy vọng nó sẽ hữu ích cho bạn 

.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>
Mở rộng đoạn trích

Nếu bạn muốn xóa màu nền, sau đó thêm màu nền mặc định theo kiểu khung hình chính

— Libin Prasanth
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.