드롭 다운 목록의 너비는 어떻게 변경합니까?

드롭 다운 목록의 너비는 어떻게 변경합니까?

---

목록 상자가 있고 너비를 줄이고 싶습니다.

내 코드는 다음과 같습니다.

<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
  <option value="kg">Kg</option>
  <option value="gm">Gm</option>
  <option value="pound">Pound</option>
  <option value="MetricTon">Metric ton</option>
  <option value="litre">Litre</option>
  <option value="ounce">Ounce</option>
</select>

이 코드는 IE 6에서 작동하지만 Mozilla Firefox (최신 버전)에서는 작동하지 않습니다. 누구든지 widthFirefox에서 드롭 다운 목록을 줄이는 방법을 알려주시겠습니까 ?

---

이 코드를 시도하십시오.

<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>

CSS :

#wgtmsr{
 width:150px;   
}

옵션의 너비를 변경하려면 CSS에서 다음을 수행 할 수 있습니다.

#wgtmsr option{
  width:150px;   
}

선택한 너비를 재정의하는 CSS 규칙에 충돌이있을 수 있습니다.

데모

---

드롭 다운 너비 자체는 설정할 수 없습니다. 너비는 옵션 값에 따라 다릅니다. 여기도 참조하십시오 (jsfiddle.net/LgS3C/)

선택 상자의 모양은 브라우저에 따라 다릅니다.

자신 만의 컨트롤을 만들거나 Select2 https://select2.org를 사용할 수 있습니다.

---

!importantCSS가 지정한 다른 스타일과 충돌하지 않는지 확인하기 위해 인수를 시도 하십시오. 또한 자신의 스타일을 추가하기 전에 reset.css를 사용하는 것이 좋습니다.

select#wgmstr {
    max-width: 50px;
    min-width: 50px;
    width: 50px !important;
}

또는

<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">

---

CSS를 만들고 CSS 코드에 값 style="width:50px;"을 설정합니다 . 드롭 다운 목록에서 CSS 클래스를 호출합니다 . 그러면 작동합니다.

---

이:

<select style="width: XXXpx;">

XXX = 모든 숫자

Google Chrome v70.0.3538.110에서 잘 작동합니다.

---

아래로 내려 오는 목록 의 너비를 제어하려면 다음과 같이 할 수 있습니다.

CSS

#wgtmsr option {
    width: 50px;
}

---

이것은 나를 위해 일했습니다.

ul.dropdown-menu > li {
    max-width: 144px;
}

Chromium 및 Firefox에서.

참조 URL : https://stackoverflow.com/questions/13931571/how-can-change-width-of-dropdown-list