Не могу изменить отображение элемента select?

select { 
  color: blue !important; 
  font-weight: bold; 
  background-color: yellow !important; 
  background-image: url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' v…0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E); 
} 
 
option { 
  color: #000; 
  background: #fff; 
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> 
 
<select class="mt-2 pl-4 custom-select user-data" name="gender"> 
    <option>Gender</option> 
    <option value="Male">Male</option> 
    <option value="Female">Female</option> 
</select>