yairEO / fancyInput

Makes typing in input fields fun with CSS3 effects
1.93k stars 283 forks source link

When selecting text in Firefox, fancyInput's text is hidden by the highlight #44

Closed notacouch closed 8 years ago

notacouch commented 9 years ago

For my own purposes where the text color (#color below) was a shade of blue this is what I used, haven't tested what would fix it for the demo:

(& refers to the <input>.)

$color_here: lighten(#color, 15%);
&::-moz-selection {
    background-color: rgba(red($color_here), green($color_here), blue($color_here), .2);
}

It seems we have to use the alpha of rgba to (lighten the color and) reduce the opacity since opacity itself does diddly squat.