input かざるやつ、Chrome only

gistfile1.scss

$color-base: #eee !default;

$color-border: darken($color-base, 50%);
$color-border-light: lighten($color-border, 30%);
$color-button: $color-base;
$color-button-hover: darken($color-button, 5%);
$color-button-push: darken($color-button, 15%);
$color-button-text: darken($color-base, 60%);

$check-size: 20px;


%button-base {
  display: inline-block;
  box-sizing: border-box;
  color: $color-button-text;
  border: {
    width: 1px;
    style: solid;
    radius: 1px;
    color: $color-border-light $color-border $color-border $color-border-light;
  }
  background: $color-button;
  text-align: center;
  &:hover {
    background: $color-button-hover;
  }
}

%input-text {
  box-sizing: border-box;
  border: {
    width: 1px;
    style: solid;
    radius: 1px;
    color: $color-border $color-border-light $color-border-light $color-border;
  }
  padding: 3px;
}

%button {
  @extend %button-base;
  padding: 3px 10px 3px 10px;
  &:hover {
    cursor: pointer;
  }
  &:active {
    background: $color-button-push;
  }
}

%button-file {
  width: 120px;
  &::before {
    @extend %button-base;
    content: 'Choose File...';
    position: absolute;
    width: 120px;
    padding: 3px 10px 3px 10px;
  }
  &:hover {
    cursor: pointer;
  }
  &:active::before {
    background: $color-button-push;
  }
}

%checkbox {
  &::before {
    @extend %button-base;
    content: '';
    position: absolute;
    width: $check-size;
    height: $check-size;
  }
  &:checked::before {
    background: {
      image: url('data:image/svg+xml,<svg viewBox="-1 -1 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M2,6L0,6L4,10L10,0L8,0L4,8Z" fill="#4c9" stroke="#000" stroke-width="0.25"/></svg>');
      size: 100% 100%;
      repeat: no-repeat;
    }
  }
}

%radio {
  position: relative;
  top: 3px;
  &::before {
    @extend %button-base;
    content: '';
    position: absolute;
    top: -3px;
    width: $check-size;
    height: $check-size;
    border-radius: 50%; 
  }
  &:checked::before {
    background: {
      image: url('data:image/svg+xml,<svg viewBox="-1 -1 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="3" fill="#4c9" stroke="#000" stroke-width="0.25"/></svg>');
      size: 100% 100%;
      repeat: no-repeat;
    }
  }
}