Cool idea. Hae you tested this thoroughly on different browsers and environments? I'll take the time to check it out before I merge it, but that is particularly useful if it works as expected.

P.S.: I am not so familiar with the whole url(data:image/svg... kind of thing (I know how it's done in theory, but I don't know how to do it myelf). Could you provide a link to some resources I can use in case I need to modify it? (It's probable I might, provided that using this technique I can change the select arrows to a single downwards facing arrow, so that the selects can be used as dropdowns, which is super neat)

I've tested this method in the past and we've been using this method for a little over a year in our insurance service portals where I work. Browser support is good (caniuse), but it doesn't work in IE9 and earlier (lol).

Here are a few resources:

• Using SVG via CSS-Tricks
• SVG with Data URIs via CSS-Tricks
• Optimizing SVGs with Data URIs
• Using Encoded Images via Hongkait

Thanks for the resources! Browser support is perfect for the framework (as long as no supported browsers have trouble with the feature, which they don't). I'll merge the PR later today, just to make sure I read the resources and figure out how to change the select double arrows to a single one. It seems like the way to go, as most OSes and browsers show a single downwards arrow instead of two!

Note: I'm really grateful for the help, as I had no clue how to resolve this issue myself, so I'll be adding you to the contributors list! 😉

@Chalarangelo Awesome! I really appreciate it -- just glad I could help. Just made another PR for #81 so hopefully that'll help as well.

Update

I'm been working on this for a little bit now. I found that it's possible to shrink the size of the embedded SVG significantly to the point that it's about two lines. Secondly, I also figured out that a single arrow can be used and it can look decent. Finally, I have been searching around for resources to tackle the flavor coloring problem and, after some creative fiddling, found out that unencoded SVGs can be embedded and that I can actually generate said SVG with a mixin or function in a way that it's color won't be fixed to a default black, but will rather use the $input-fore-color value, effectively adapting the fix for all flavors.

More tweaking is required and I will also try to shrink down the size of the code as much as possible, but this looks very promising so far.

P.S.: I will merge both of your PRs as soon as I have figured out exactly what needs to be altered, so that I can release the next version really quickly, otherwise some people using the master branch directly might experience minor issues.

Update 2

I found a problem with the original $input-background-color not getting applied as required, when using the SVG solution, however this can easily be fixed using a second background-image to fill the rest of the area. I think this is as close as I can get to a perfect solution. Your idea was a particularly solid one!

After a lot of tweaking and testing, I ended up with this piece of code:

// Dummy values (based on default flavor)
$input-fore-color: #212121;
$input-back-color: #fafafa;

// Courtesy of: https://css-tricks.com/snippets/sass/str-replace-function/
@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

// Generates the arrow
@function selectArrow() {
  $_input_fore_color: str-replace(#{$input-fore-color}, '#', '%23');
  @return 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.5"><path fill="'+$_input_fore_color+'" d="M.25.75h.5L.5 1"/></svg>';
}

// Generates the rest of the background
@function selectBackground() {
  $_input_back_color: str-replace(#{$input-back-color}, '#', '%23');
  @return 'data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" style="background:'+$_input-back-color+'"/>';
}

select {
  // Add some extra padding for good measure (should be added from the flavor file)
  padding-right: 1.5rem;
  // Generate images (keep arrow before background to have a higher z-index)
  background-image: url(selectArrow()), url(selectBackground());
  // Arrow goes right, background goes left
  background-position: right, left;
  // Repeat only the background
  background-repeat: no-repeat, repeat;
  // Rest of the fix applied
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

The end result is quite clean and works well for any flavor (as far as I can tell), only drawback is that it requires the user to add some extra padding-right to their select boxes, although this isn't really that big a problem.

I'll be testing the other PR now and I will merge and update as soon as I have it all figured out!