Skip to content

Instantly share code, notes, and snippets.

@Ashkanph
Created August 22, 2020 09:04
Show Gist options
  • Save Ashkanph/b69aa4a17b42080a3f0beb9fed71e5e3 to your computer and use it in GitHub Desktop.
Save Ashkanph/b69aa4a17b42080a3f0beb9fed71e5e3 to your computer and use it in GitHub Desktop.
similar select in all browsers

.role-select, .status-select { background-color: var(--backgound); color: var(--onbackground); width: 130px; border: 1px solid var(--background); background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAACAKADAAQAAAABAAACAAAAAAAL+LWFAAAaoUlEQVR4Ae3dS4tlVxUH8EpI0IkdI0lH7UTagQ4EB4IYEREFR34DIfgdxKkDZw78CIIOHPmYODHamIBEEewgSbetpOMjiKgj0bmkXcdw0qnqU1X3cc5+rP27sFNVt+49Z+/f2ueuf92udJ+cuBEgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAA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wDsEHonPvxrj3zHOCwL/ie99LcajMdwIECBw8hADAgTSCFyJlXwpxudizD/l/ys+fynGT2JMIcCNAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAwMYC/wPh7LvDs6rr+AAAAABJRU5ErkJggg=="); appearance: none;

  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;

  option {
      color: black !important;

  }

}

{Tm('common.enabled')} {Tm('common.disabled')}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment