```html
<div class="select-container" data-content=""> <select class="select" id="words"> <option value="lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</option> <option value="lorem">Lorem</option> <option value="ipsum">Ipsum</option> <option value="dolor">Dolor</option> <option value="sit">Sit</option> <option value="amet">Amet</option> </select> </div>css
.select {
color: transparent;
appearance: none;
padding: 5px;
background: transparent url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png") no-repeat calc(~"100% - 5px") 7px;
background-size: 10px 10px;
}
.select-container { position: relative; display: inline-block; }
.select-container::before {
content: attr(data-content);
pointer-events: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
left: 0;
padding: 7px;
font: 11px Arial, sans-serif;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
text-transform: capitalize;
}
js
const selectContainer = document.querySelector(".select-container");
const select = selectContainer.querySelector(".select");
select.value = "lorem ipsum dolor sit amet"; selectContainer.dataset.content = select.value;
function handleChange(e) { selectContainer.dataset.content = e.currentTarget.value; }
select.addEventListener("change", handleChange); ```