0

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

1 respuesta 1

0

¿Has probado a ponerle a los input input:-webkit-autofill?

A mi me pasaba mucho que hacía un estilo muy trabajado y luego me lo mandaban al traste las configuraciones de cada navegador

si te sirve de algo te dejo una tabla de prefijos para cada navegador tabla de prefijos para css según navegador

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.