Estoy creando una página web, estoy aprendiendo, estoy con HTML y CSS. Diseñé una página de Log in, pero cuando inserto una letra en el input de usuario, y salen las sugerencias, cuando paso el mouse por encima de la sugerencia, el input cambia su background de transparente a blanco, al igual que cambia el font. y luego cuando lo selecciono, el input igual sigue con el background de color blanco. No se como resolver este problema, he leído en otras partes que en el HTML agregar en el input el autocomplete="off" medio arregla este problema, pero yo quiero que el navegador dé las sugerencias de usuarios, no quiero desactivar el autocomplete. No se qué hacer. Aquí les muestro la imagen de lo que pasa con el input:
Aquí les agrego el código en HTML y en SASS:
<!DOCTYPE html>
<html lang="es">
<head>
<meta viewport="width=device-width" <meta charset="UTF-8">
<meta name="description" content="jesus diaz, diseño web, software developer">
<meta name="author" content="Jesus Diaz">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!-- width=device-width : establecemos que el ancho de la página sea igual al del dispositivo
user-scalable=no : establecemos que el usuario no puede escalar el sitio web
initial-scale=1.0 : establecemos que la página tendrá un tamaño inicial de 1
maximum-scale=1.0 : establecemos que la página tendrá un tamaño maximo de 1
minimum-scale=1.0 : establecemos que la página tendrá un tamaño mínimo de 1 -->
<title>Log In/Sign In</title>
<link rel="stylesheet" href="../styles/styles.css">
</head>
<body>
<section class="main">
<div class="logo">
<h1>Jesús<span>DESKTOP</span></h1>
<p>Software Developer</p>
</div>
<form class="main__form">
<input type="text" class="input" id="main__form--input--usuario" placeholder="Usuario" required autocomplete="off">
<input type="password" class="input" id="main__form--input--password" placeholder="Password" required>
<input type="submit" class="boton" id="main__form--submit" value="Aceptar">
</form>
<div class="main__opciones">
<a href="" class="enlace" id="main__opciones--signUp">Sign Up</a>
<a href="" class="enlace" id="main__opciones--logIn">Log In</a>
</div>
</section>
<script src="../javascript/main.js"></script>
</body>
</html>
@import plantillas/generales/generales
@import plantillas/colores/colores
@import plantillas/font-face/font-face
@import plantillas/logo/logo-JesusDESKTOP/logo-JesusDESKTOP
*
font-family: Caviar_Dreams
@mixin flex-center-align()
justify-content: center
align-items: center
@mixin display-flex-row()
display: flex
flex-direction: row
@include flex-center-align
@mixin display-flex-column()
display: flex
flex-direction: column
@include flex-center-align
html, body
height: 100%
@include display-flex-column()
background: $colorAzulProfundoIncreible
.main
width: 500px
height: 500px
background-color: rgba(0,0,0,.20)
border-radius: 10px
@include display-flex-column()
justify-content: space-around
.main__form
width: 100%
height: 200px
@include display-flex-column()
justify-content: space-evenly
.main__opciones
width: 125px
@include display-flex-row()
justify-content: space-between
.logo
@include logo-iniciar($fuente: Caviar_Dreams, $color1: white, $color2: $colorDoradoIncreible, $tamano: 26px)
p
font-size: 16px
.input
width: 50%
outline: none
background: none
border-top: 0px
border-right: 0px
border-bottom: 1px
border-left: 0px
border-style: solid
border-color: white
color: white
font-size: 18px
text-align: center
.input:hover
border-color: $colorDoradoIncreible
.input::placeholder
color: white
.input:focus
border-color: $colorDoradoIncreible
.boton
width: 20%
height: 30px
background: none
border-color: white
border-style: solid
border-radius: 8px
color: white
outline: none
.boton:hover
color: $colorDoradoIncreible
border-color: $colorDoradoIncreible
.enlace
color: white
font-size: 18px
.enlace:hover
color: $colorDoradoIncreible