In firefox, having a select focused puts me some points that I don't know exactly how to remove.
On some occasion I have removed them, but I do not remember what it was like.
If I'm not mistaken it's with outline, but in firefox it doesn't matter to me.
.txt {
padding: 10px;
&:read-write:focus {
background: #eeeeee;
outline: none;
}
}
<div class="txt" contenteditable="true">Lorem ipsum</div>
I give an example of what happens... with safari I see a background, but with firefox I see the dots.
Your problem really is that in order to use the selector
read-write
in Firefox you need to prefix it with-moz
.I have managed to reproduce your error with Firefox 49.0.2.
Of course, keep in mind that you will have to make two CSS entries, one for Firefox and one for all other browsers.
Your modified example:
NOTE: Here I have put the code in pure CSS so that you can see the effect in the snippet since with SASS we will not be able to see the result here.
Your code with SASS would look like this:
It is assumed that, since you have it in your code, it worked, I don't know if it was already deprecated or why it doesn't work anymore. But, with the property
[contenteditable]
it is possible, although you apply it to all the elements not only to the classes.txt
:a:hover { margin: //whatever you want to happen with the margin }