Quitar puntos de select focus css

publicado por: Anonymous

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.

_x000D_

_x000D_

.txt {_x000D_
    padding: 10px;_x000D_
    _x000D_
    &:read-write:focus {_x000D_
        background: #eeeeee;_x000D_
        outline: none;_x000D_
    }_x000D_
}

_x000D_

<div class="txt" contenteditable="true">Lorem ipsum</div>

_x000D_

_x000D_

_x000D_

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

solución

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:

_x000D_

_x000D_

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

_x000D_

<div class="txt" contenteditable="true">Lorem ipsum</div>

_x000D_

_x000D_

_x000D_

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í:

_x000D_

_x000D_

.txt {_x000D_
    padding: 10px;_x000D_
    _x000D_
    &:-moz-read-write:focus {_x000D_
        background: #eeeeee;_x000D_
        outline: none;_x000D_
    }_x000D_
    _x000D_
    &:read-write:focus {_x000D_
        background: #eeeeee;_x000D_
        outline: none;_x000D_
    }_x000D_
}

_x000D_

<div class="txt" contenteditable="true">Lorem ipsum</div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *