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

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 >
  <h3>使用帳號</h3>
  <select >
    <option value="all">all</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

CodePudding user response：

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 >
    <div >Select an option</div>
    <ul >
      <li ><span>Option 1</span></li>
      <li ><span>Option 2</span></li>
      <li ><span>Option 3</span></li>
    </ul>
  </div>
</form>