Кастомная стилизация input,select,datalist

body, 
html { 
  background-color: red; 
} 
 
label { 
  position: relative; 
  display: inline-block; 
  margin: 30px; 
} 
 
label:before { 
  content: ''; 
  position: absolute; 
  display: inline-block; 
  width: 44px; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  z-index: 2; 
  pointer-events: none; 
  background-color: yellow; 
} 
 
label:after { 
  content: ''; 
  position: absolute; 
  display: inline-block; 
  border: solid red; 
  border-width: 0 3px 3px 0; 
  width: 4px; 
  height: 4px; 
  padding: 3px; 
  transform: translate(-1rem, -0.6rem) rotate(45deg); 
  right: 0; 
  top: 25px; 
  z-index: 2; 
  pointer-events: none; 
} 
 
label select { 
  position: relative; 
  -webkit-appearance: none; 
  -moz-appearance: none; 
  appearance: none; 
  background: none; 
  width: 300px; 
  height: 50px; 
  color: #fff; 
  border: none; 
  outline: none; 
  font-size: 16px; 
  padding: 12px 14px; 
  margin: 0; 
  cursor: pointer; 
  background: rgba(0, 0, 0, 0.3); 
} 
 
button { 
  display: block; 
  margin: 0 0 0 30px; 
  border: none; 
  outline: none; 
  border-radius: 25px; 
  width: 260px; 
  height: 50px; 
  background-color: yellow; 
  color: red; 
  text-transform: uppercase; 
  font-weight: bold; 
  cursor: pointer; 
}

<label> 
  <select name="options"> 
    <option value="option-1">Option 1</option> 
    <option value="option-2">Option 2</option> 
    <option value="option-3">Option 3</option> 
  </select> 
</label> 
<button type="button">Button</button>