OS X의 Firefox에서 Bootstrap 3 Styled Select 드롭 다운이보기 흉하게 보입니다.

OS X의 Firefox에서 Bootstrap 3 Styled Select 드롭 다운이보기 흉하게 보입니다.

---

<select>Bootstrap 3에서 양식 요소의 스타일을 지정할 때 OS X의 Firefox에서보기 흉한 버튼을 렌더링합니다.

( http://bootply.com/98385 )

이것은 분명히 한동안 알려진 문제였으며 여러 가지 해킹 및 해결 방법이 있지만 매우 깨끗한 것은 없습니다 ( https://github.com/twbs/bootstrap/issues/765 ). 누구든지 부트 스트랩 드롭 다운이나 추가 플러그인을 사용하는 것 외에이 문제에 대한 좋은 해결책을 찾았는지 궁금합니다. <select>모바일 장치의 긴 목록에서 유용성이 더 낫기 때문에 부트 스트랩 드롭 다운 대신 HTML을 사용하기로 의도적으로 선택했습니다 .

Firefox 문제입니까 아니면 부트 스트랩 문제입니까?

세부 정보 : Mac OS X 10.9, Firefox 25.0.1

업데이트 12/4/13 :<select> @zessx ( http://bootply.com 사용)에 대한 응답으로 Firefox, Chrome 및 Safari를 사용하여 OS X 10.9에서 각 브라우저 가을 렌더링하는 방법을 나란히 비교했습니다. / 98425 ). 분명히 <select>양식 요소가 브라우저와 OS에서 렌더링 되는 방식에는 큰 차이 가 있습니다.

<select>스타일과 동작을 지시하는 기본 OS 기반 컨트롤이 있기 때문에 사용중인 OS에 따라 태그가 다르게 처리 된다는 것을 이해합니다 . 그러나 Firefox에서 폼 요소가 다르게 보이게 class="form-control"하는 부트 스트랩의 원인은 <select>무엇입니까? <select>Firefox에서 스타일이 지정되지 않은 기본값 이 괜찮아 보이지만 일단 스타일이 지정되면보기 흉해 보이는 이유는 무엇입니까?

---

IE에서 드롭 다운 화살표 주위의 회색 상자를 실제로 변경할 수 있습니다.

        select::-ms-expand {
            width:12px;
            border:none;
            background:#fff;
        }

---

실제로 드롭 다운 필드로 거의 모든 작업을 수행 할 수 있으며 모든 브라우저에서 동일하게 표시됩니다. 코드 예제를 살펴보세요.

select.custom {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23555555%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
  padding-right: 25px;
  background-repeat: no-repeat;
  background-position: right center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.custom::-ms-expand {
  display: none;
}

https://jsfiddle.net/x76j455z/10/

---

rafx 및 Sina 의 훌륭한 답변을 바탕으로 Firefox만을 대상으로하고 기본 버튼을 Bootstrap의 아이콘 테마에서 복사 한 아래쪽 캐럿으로 대체하는 스 니펫이 있습니다.

전에:

후:

@-moz-document url-prefix() {
  select.form-control {
    padding-right: 25px;
    background-image: url("data:image/svg+xml,\
      <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
           height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
        <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
      </svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 50%;
    -moz-appearance: none;
    appearance: none;
  }
}

(인라인 SVG에는 가독성을 위해 백 슬래시와 줄 바꿈이 있습니다. 애셋 파이프 라인에 문제가 발생하면 제거하세요.)

다음은 JSFiddle입니다.

---

There is a slick-looking jQuery plugin that apparently plays nice with Bootstrap called SelectBoxIt (http://gregfranko.com/jquery.selectBoxIt.js/). The thing I like about it is that it allows you to trigger the native select box on whatever OS you are on while still maintaining a consistent styling (http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox). Oh how I wish Bootstrap provided this option!

The only downside to this is that it adds another layer of complexity into a solution, and additional work to ensure compatibility with all other plug-ins as they get upgraded/patched over time. I'm also not sure about Bootstrap 3 compatibility. But, this may be a good solution to ensure a consistent look across browsers and OS's.

---

This is the normal behavior, and it's caused by the default <select> style under Firefox : you can't set line-height, then you need to play on padding when you want to have a customized <select>.

Example, with results under Firefox 25 / Chrome 31 / IE 10 :

<select>
  <option>Default</option>
  <option>Default</option>
  <option>Default</option>
</select>

<select class="form-control">
  <option>Bootstrap</option>
  <option>Bootstrap</option>
  <option>Bootstrap</option>
</select>

<select class="form-control custom">
  <option>Custom</option>
  <option>Custom</option>
  <option>Custom</option>
</select>

select.custom {
  padding: 0px;
}

Bootply

---

I'm sure -webkit-appearance:none does the trick for Chrome and Safari.

EDIT : -moz-appearance: none should now work as well on Firefox.

---

This is easy. You just need to put inside .form-control this:

.form-control{
        -webkit-appearance:none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
}

This will remove browser's appearance and allow your CSS.

---

I found two potential ways of solving this specific problem:

1. Use Chosen

2. Target mozilla browsers using @-moz-document url-prefix() like so:

@-moz-document url-prefix() {
  select {
    padding: 5px;
  }
}

---

We have been using the plugin bootstrap-select for Bootstrap for dtyling selects. Really works well and has lots of interesting additional features. I can recommend it for sure.

---

I am using Chosen. Look at: http://harvesthq.github.io/chosen/

It works on Firefox, Chrome, IE and Safari with the same style. But not on Mobile Devices.

---

With Bootstrap 4+, you can simply add the class custom-select for your select inputs to drop the browser-specific styling and keep the arrow icons.

Documentation Here: Bootstrap 4 Custom Forms Select Menu

---

jquery.chosen 또는 bootstrap-select를 사용하여 버튼에 스타일을 추가 할 수 있습니다. Chosen 또는 bootstrap-select 사용시주의 사항 : 둘 다 원래 선택을 숨기고 자체 ID로 자체 div에 추가합니다. 예를 들어 jquery.validate를 이것과 함께 사용하는 경우 이름이 변경 되었기 때문에 유효성 검사를 수행 할 원래 선택을 찾지 못합니다.

참고 URL : https://stackoverflow.com/questions/20366166/bootstrap-3-styled-select-dropdown-looks-ugly-in-firefox-on-os-x