드롭 다운 화살표의 색상 및 모양 변경

드롭 다운 화살표의 색상 및 모양 변경

---

드롭 다운 목록 화살표의 기본 모양을 브라우저에서 동일하게 변경하고 싶습니다. CSS 또는 기타를 사용하여 드롭 다운 화살표의 기본 모양과 느낌을 재정의하는 방법이 있습니까?

---

CSS로이를 달성 할 수 있지만 화살표 자체를 기술적으로 변경하지는 않습니다.

이 예에서는 실제로 기본 화살표를 숨기고 대신 내 화살표를 표시합니다.

.styleSelect select {
  background: transparent;
  width: 168px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #000;
}

.styleSelect {
  width: 140px;
  height: 34px;
  overflow: hidden;
  background: url("images/downArrow.png") no-repeat right #fff;
  border: 2px solid #000;
}

<div class="styleSelect">
  <select class="units">
    <option value="Metres">Metres</option>
    <option value="Feet">Feet</option>
    <option value="Fathoms">Fathoms</option>
  </select>
</div>

---

아니요, 브라우저 간 양식 커스터마이징은 모든 브라우저에 적합하게 만드는 것이 불가능하지는 않지만 매우 어렵습니다. 이러한 위젯의 모양에 정말로 관심이 있다면 자바 스크립트 구현을 사용해야합니다.

참조 http://www.456bereastreet.com/archive/200409/styling_form_controls/ 및 http://developer.yahoo.com/yui/examples/button/btn_example07.html

---

다음을 통해 수행 할 수 있습니다.

select{
  background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
}

select{
  background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
  
  
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    appearance: none;
    outline-width: 0;
    
    padding: 10px 10px 10px 5px;
    display: block;
    width: 10em;
    border: none;
    font-size: 1rem;
    
    border-bottom: 1px solid #757575;
  }

<div class="styleSelect">
  <select class="units">
    <option value="Metres">Metres</option>
    <option value="Feet">Feet</option>
    <option value="Fathoms">Fathoms</option>
  </select>
</div>

---

The <select> element is generated by the application and styling is not part of the CSS/HTML spec.

You would have to fake it with your own DIV and overlay it on top of the existing one, or build your own control emulating the same functionality.

---

No, you can't do it by using an actual <select>, but there are techniques that allow you to "replace" them with javascript solutions that look better.

Here's a good article on the topic: <select> Something New

---

Not easily done I am afraid. The problem is Css cannot replace the arrow in a select as this is rendered by the browser. But you can build a new control from div and input elements and Javascript to perform the same function as the select.

Try looking at some of the autocomplete plugins for Jquery for example.

Otherwise there is some info on the select element here:

http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/

---

We have used YUI, Chosen, and are currently using the jQuery Select2 plugin: https://select2.github.io/

It's pretty robust, the arrow is just the tip of the iceberg.

As soon as stylized selects becomes a requirement, I agree with the others, go with a plugin. Don't kill yourself reinventing the wheel.

---

Unless you plan on creating your own drop down list (and not using a standard library drop down list), you are stuck. The DDL control's look is going to be based upon the system you are running and/or the browser that is rendering the output.

---

Try changing the color of your "border-top" attribute to white

참고URL : https://stackoverflow.com/questions/611482/change-color-and-appearance-of-drop-down-arrow