Search code examples
htmlcsscomboboxbackground-image

How do I rotate a image background on a <select> element?

When I use transform: rotate() the whole button is rotated, not just the image, I thought of create a div to wrap the image, rotate this div and position it above the button, but it feel wrong, there has to be another way.

select{
  border: 1px solid #ccc;
  padding: 5px 35px 5px 5px;
  width:150px;
  height: 40px;
  background-color: #eee;
  color: black;
  font-size: 16px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background:  url(https://image.flaticon.com/icons/svg/660/660570.svg) 90% / 12% no-repeat #eee ;
  
}
<select>
    <optgroup label="Ultra Secret">
      <option>007</option>
      <option selected>MIB</option>
      <option>u mom Alien</option>
      <option>no u</option>
  </optgroup>
  
  <optgroup label="Something Important">
      <option>Item 1</option>
      <option>Item 2</option>
      <option>Item 3</option>
      <option>Item 4</option>
      <option>Item 5</option>
  </optgroup>

</select>

Solution

  • You need to switch from an image to another , rotation is not avalaible for background-image

    example

    select{
  border: 1px solid #ccc;
  padding: 5px 35px 5px 5px;
  width:150px;
  height: 40px;
  background-color: #eee;
  color: black;
  font-size: 16px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background:  url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyLjAwMyA1MTIuMDAzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDAzIDUxMi4wMDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxwb2x5Z29uIHN0eWxlPSJmaWxsOiNBNEMyRjc7IiBwb2ludHM9IjQzMi43NjQsMjU2LjAwMyA3OS4yNCw0OTkuODEzIDc5LjI0LDI2MC40NDEgNzkuMjQsMTIuMTk0IAkiLz4NCgk8cG9seWdvbiBzdHlsZT0iZmlsbDojRTNFN0YyOyIgcG9pbnRzPSI3OS4yNCw1NC4yMjcgNzkuMjQsNDU3Ljc4IDM3MS44MTEsMjU2LjAwMyAJIi8+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzQyOERGRjsiIGQ9Ik03OS4yNCw1MTIuMDAzYy0zLjIzNCwwLjAwMy02LjMzNi0xLjI4MS04LjYyMy0zLjU2N2MtMi4yODctMi4yODctMy41Ny01LjM4OS0zLjU2Ny04LjYyM1YxMi4xOTQNCgkJYy0wLjAwMi00LjUzMiwyLjUxLTguNjksNi41MjItMTAuNzk3YzQuMDEyLTIuMTA3LDguODYyLTEuODE0LDEyLjU5MSwwLjc2MWwzNTMuNTI0LDI0My44MWMzLjI5OSwyLjI3Niw1LjI2OCw2LjAyOCw1LjI2OCwxMC4wMzYNCgkJYzAsNC4wMDgtMS45NjksNy43NTktNS4yNjgsMTAuMDM2TDg2LjE2Miw1MDkuODQ5Qzg0LjEyNiw1MTEuMjUxLDgxLjcxMiw1MTIuMDAzLDc5LjI0LDUxMi4wMDN6IE05MS40MywzNS40MDh2NDQxLjE5DQoJCWwzMTkuODYzLTIyMC41OTVMOTEuNDMsMzUuNDA4eiIvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=) 90% / 12% no-repeat #eee ;
  
}
select:focus {
background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyLjAwMyA1MTIuMDAzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDAzIDUxMi4wMDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIiA+DQo8ZyBzdHlsZT0idHJhbnNmb3JtOnJvdGF0ZSg5MGRlZyk7dHJhbnNmb3JtLW9yaWdpbjo1MCUgNTAlIj4NCgk8cG9seWdvbiBzdHlsZT0iZmlsbDojQTRDMkY3OyIgcG9pbnRzPSI0MzIuNzY0LDI1Ni4wMDMgNzkuMjQsNDk5LjgxMyA3OS4yNCwyNjAuNDQxIDc5LjI0LDEyLjE5NCAJIi8+DQoJPHBvbHlnb24gc3R5bGU9ImZpbGw6I0UzRTdGMjsiIHBvaW50cz0iNzkuMjQsNTQuMjI3IDc5LjI0LDQ1Ny43OCAzNzEuODExLDI1Ni4wMDMgCSIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiM0MjhERkY7IiBkPSJNNzkuMjQsNTEyLjAwM2MtMy4yMzQsMC4wMDMtNi4zMzYtMS4yODEtOC42MjMtMy41NjdjLTIuMjg3LTIuMjg3LTMuNTctNS4zODktMy41NjctOC42MjNWMTIuMTk0DQoJCWMtMC4wMDItNC41MzIsMi41MS04LjY5LDYuNTIyLTEwLjc5N2M0LjAxMi0yLjEwNyw4Ljg2Mi0xLjgxNCwxMi41OTEsMC43NjFsMzUzLjUyNCwyNDMuODFjMy4yOTksMi4yNzYsNS4yNjgsNi4wMjgsNS4yNjgsMTAuMDM2DQoJCWMwLDQuMDA4LTEuOTY5LDcuNzU5LTUuMjY4LDEwLjAzNkw4Ni4xNjIsNTA5Ljg0OUM4NC4xMjYsNTExLjI1MSw4MS43MTIsNTEyLjAwMyw3OS4yNCw1MTIuMDAzeiBNOTEuNDMsMzUuNDA4djQ0MS4xOQ0KCQlsMzE5Ljg2My0yMjAuNTk1TDkxLjQzLDM1LjQwOHoiLz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg==) 90% / 12% no-repeat #eee ;
    <select>
    <optgroup label="Ultra Secret">
      <option>007</option>
      <option selected>MIB</option>
      <option>u mom Alien</option>
      <option>no u</option>
  </optgroup>
  
  <optgroup label="Something Important">
      <option>Item 1</option>
      <option>Item 2</option>
      <option>Item 3</option>
      <option>Item 4</option>
      <option>Item 5</option>
  </optgroup>

</select>