-
-
Save tobaco/cd64723d7ddd2399edd34bee70cf44e5 to your computer and use it in GitHub Desktop.
Emulating caret-color in WebKit/Blink
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Emulating caret-color in WebKit/Blink | |
* Warning: NON-STANDARD. Your text will be shown with the caret color in Firefox, despite the @supports. | |
*/ | |
@keyframes rainbow { | |
9% { color: yellow } | |
27% { color: orange } | |
45% { color: lime } | |
63% { color: aqua } | |
81% { color: blue } | |
90% { color: fuchsia } | |
} | |
textarea { | |
font-size: 500%; | |
height: 5em; | |
color: red; | |
} | |
@supports(-webkit-text-fill-color: black) { | |
/* @supports here doesn't do much, since all browsers have implemented -webkit-text-fill-color | |
for web compat, but they implemented it incompatibly it seems :( */ | |
textarea { | |
-webkit-text-fill-color: black; | |
animation: 10s rainbow infinite; /* Animatable too! */ | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<textarea>Click here and notice how the blinking caret is a different color than the text!</textarea> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// alert('Hello world!'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment