Skip to content

Instantly share code, notes, and snippets.

@skoch

skoch/custom-caret.scss

Created May 13, 2019 17:04
Show Gist options
  • Save skoch/83be7d9a72657f11b35c8ea3f182ad77 to your computer and use it in GitHub Desktop.
Save skoch/83be7d9a72657f11b35c8ea3f182ad77 to your computer and use it in GitHub Desktop.
Download ZIP
An example for using SVG string in CSS
Raw
custom-caret.scss
select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10'%3E%3Cpolyline fill='none' stroke='%233194E0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' points='1 1 8.5 8.5 16 1'/%3E%3C/svg%3E%0A");
background-position: calc(100% - 2rem) 2.6rem;
background-repeat: no-repeat;
&:hover {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10'%3E%3Cpolyline fill='none' stroke='%23C9EEFE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' points='1 1 8.5 8.5 16 1'/%3E%3C/svg%3E%0A");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment