如何在元素上旋转图像背景<select>？

Question

当我使用transform: rotate()整个button旋转时，而不仅仅是图像，我想创建一个div来包装图像，旋转这个div并将其放置在button上方，但感觉不对，必须有另一种方法。

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>

Answer 1

您需要从一个图像切换到另一个图像，旋转不适用于背景图像

例

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>