How to drastically change the style and interaction effect of select?

Question

I have a requirement that I need to change the appearance style of the select, the style of the menu needs to be changed, and the arrow icon on the right side of the menu also needs to expand the menu so that the arrow pattern goes up. Is there a way to change it?

Because I don't know. How to do this kind of drastic change needs, I hope you can know how to do it and teach me, thank you

The style I want to change is as follows

.filter_account {
  display: flex;
  align-items: center;
}

h3 {
  font-size: 14px;
  margin-right: 8px;
}

.account_fliter {
  width: 140px;
  padding: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

<div class="filter_account">
  <h3>使用帳號</h3>
  <select class="account_fliter">
    <option value="all">all</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

You can check [change-select-list-option-background-colour-on-hover](https://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover) — flyingfox, Oct 17 '22 at 06:42
You're gonna have to recreate a custom placeholder with eventlisteners that interact with the original `select`-element if you want to customize it fully. Alternatively you could use a library that does the hard work for you. — Sigurd Mazanti, Oct 17 '22 at 07:54
There's only a small amount you can do to style a select element so your 'drastically' may not be possible, depending on exactly what you want to do. As https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select states: "The — A Haworth, Oct 17 '22 at 09:08
Thank you for your answers~ Let me know the original select is not good to change — AWEI, Oct 17 '22 at 10:04

score 1 · Accepted Answer · answered Oct 17 '22 at 09:56

You may want to consider using a self-built select box which you can modify according to your needs.

const options = document.querySelector("ul.options");
const selected = document.querySelector("div.selected");
selected.addEventListener("click", (e) => options.classList.toggle("open"));

const optionList = [...document.querySelectorAll("ul.options li")];
optionList.map((option) => option.addEventListener("click", function() {
  const value = this.getElementsByTagName("span")[0].innerHTML;
  selected.innerHTML = value;
  document.querySelector("#sel").value = value;
  options.classList.toggle("open");
}));

.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

.selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

.selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

.options {
  display: none;
  margin: 0;
  padding: 0;
}

.options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li>img {
  margin-right: 1em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
  <input type="hidden" id="sel">
  <div class="container">
    <div class="selected">Select an option</div>
    <ul class="options">
      <li class="option"><span>Option 1</span></li>
      <li class="option"><span>Option 2</span></li>
      <li class="option"><span>Option 3</span></li>
    </ul>
  </div>
</form>

Thank you very much for your help and also tell me how to build one myself, otherwise I really don't know how to accomplish this requirement, thank you. — AWEI, Oct 17 '22 at 10:04
Hello~ May I ask why it is necessary to use the form tag to wrap it in the outer layer? Is there any consideration? — AWEI, Oct 18 '22 at 01:31
@AWEI There's a hidden input tag. When the form is submitted, the hidden input tag contains the selected value. — Gerard, Oct 18 '22 at 04:54

How to drastically change the style and interaction effect of select?

1 Answers1