Jump to content
Search Community

animate rgba of selected text?

erikb test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Thanks for the example Rodrigo.  However, I was hoping to change the selection color of an input, not the background color.  In my browsers, the default input selection color is light blue.  Any ideas if that attribute is tweenable?

Link to comment
Share on other sites

Hello erikb..


I think you are referring to the Pseudo-Element ::selection.


This is a non-standard pseudo element, and was part of the CSS3 spec in earlier versions, but was later removed in the Candidate Recommendation phase, before it reached the Recommendation status.






Firefox needs the -moz- prefix to work:

/* draw any selected text yellow on red background */
::-moz-selection { color: gold;  background: red; }
::selection      { color: gold;  background: red; } 

/* draw selected text in a paragraph white on black */
p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

There should be away for GSAP to animate it .. but as of now, there is not any standard specification for the CSS pseudo-element ::selection.

  • Like 1
Link to comment
Share on other sites

Hi Erik,


Probably not. The ::selection pseudo-element was considered in an original draft by W3C, but later removed because of some issues, so is not a standard and not broadly supported on input elements, just firefox and some versions of IE(9+).




Since this is not a standard spec the CSSPlugin doesn't have yet(just yesterday Jonathan posted a new topic about the pseudo-elements notation and that is not supported). Jack as stated in other posts that, until something is accepted and passed as a standard He doesn't add it to the engine, because later, when it becomes a standard some things about the property might change, which forces to make big changes in the engine's code.


I've never played too much with pseudo-classes/elements in the past, but selecting this particular pseudo-element can be a little harder since you can't use the CSSRule plugin. What you could do is add a new class with the pseudo-element, then tween a color property and finally pass that to the element using jQuery's css() method.


Keep in mind that Jamie's codepen uses the CSSRule plugin but is selecting elements with single colon not double colon. The selection pseudo-element always uses the double colon syntax, so the CSSRule plugin won't recognize it.



  • Like 3
Link to comment
Share on other sites

Also just a heads up, Jonathan has the syntax exactly right - you won't be able to combine the rules i.e.

::-moz-selection, ::selection { color: gold;  background: red; } 

Browsers have to invalidate an entire rule if even a single selector is invalid; in Mozilla ::selection is invalid, while in other browsers ::-moz-selection is invalid. You do need to define the rule twice if you are using it.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...