2

En firefox al tener enfocado un select me pone unos puntos que no se exactamente como quitar.

Son estos: introducir la descripción de la imagen aquí

En alguna ocasión los he quitado, pero no recuerdo como era.

Si no me equivoco es con outline, pero en firefox pasa de mi.

.txt {
    padding: 10px;
    
    &:read-write:focus {
        background: #eeeeee;
        outline: none;
    }
}
<div class="txt" contenteditable="true">Lorem ipsum</div>

Pongo un ejemplo de lo que pasa... con safari veo un fondo, pero con firefox veo los puntitos.

2
  • Es que versión de firefox pasa? O tienes un link al repositorio del proyecto? Es que no logro reproducir lo que dices y no se si es porque tengo la última versión de firefox o si tienes otro problemas con los estilos. Commented el 27 ene. 2018 a las 0:53
  • @EdgarGutiérrez Yo he conseguido reproducirlo con Firefox 49.0.2. Commented el 27 ene. 2018 a las 12:12

3 respuestas 3

2

Tu problema realmente es que para poder utilizar el selector read-write en Firefox necesitas agregarle el prefijo -moz.

Yo he conseguido reproducir tu error con Firefox 49.0.2.

Por supuesto, ten en cuenta que tendrás que realizar dos entradas de CSS, una para Firefox y otra para el resto de navegadores.

Tu ejemplo modificado:

.txt {
   padding: 10px;
}

.txt:-moz-read-write:focus {
   background: #eeeeee;
   outline: none;
}

.txt:read-write:focus {
   background: #eeeeee;
   outline: none;
}
<div class="txt" contenteditable="true">Lorem ipsum</div>

NOTA: Aqui he puesto el código en CSS puro para que se pueda ver el efecto en el snippet ya que con SASS no podremos ver el resultado aquí.

Tu código con SASS quedaría así:

.txt {
    padding: 10px;
    
    &:-moz-read-write:focus {
        background: #eeeeee;
        outline: none;
    }
    
    &:read-write:focus {
        background: #eeeeee;
        outline: none;
    }
}
<div class="txt" contenteditable="true">Lorem ipsum</div>

0
1

Se supone que, como lo tienes en tu código funcionaba, desconozco si ya fue deprecada o por qué ya no funciona. Pero, con la propiedad [contenteditable] es posible, aunque lo aplica a todos los elementos no solo a la clases .txt:

.txt {
    padding: 10px;
}
[contenteditable]:focus {
   outline: 0px solid transparent;
}
<div class="txt" contenteditable="true">Lorem ipsum</div>

-4

a:hover { margin: //lo que quieras que pase con el margen }

1
  • Creo que no es eso lo que necesito. he puesto un ejemplo
    – Killpe
    Commented el 26 ene. 2018 a las 22:37

Tu Respuesta

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

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