부트스트랩 선택 옵션 드롭다운 아래쪽 화살표가 표시되지 않음

부트스트랩 선택 옵션 드롭다운 아래쪽 화살표가 표시되지 않음

클래스에서 부트스트랩 선택 옵션 필드를 사용합니다.form-control

코드는 다음과 같습니다.

<select class="form-control" onchange="location = this.value;">
            <option>Select a Generic Name</option>
            <option value="1">Title 1</option>
            <option value="2">Title 2</option>
 </select>

그러나 드롭다운 옵션 아래 화살표 아이콘이 표시되지 않습니다.

CSS:

.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}

이 아이콘을 표시할 때 가장 큰 문제는 무엇입니까?

부트스트랩 v5를 사용하는 경우 태그가 다음과 같이 변경되었습니다.

<select class="form-select">

저는 @Sayed Hussainullah Sadat의 답변을 약간 수정하여 이 문제를 해결할 수 있었습니다.

폼 컨트롤 클래스 옆에 폼 선택 클래스를 추가합니다.

<select class="form-control form-select">
    <option>Select a Generic Name</option>
    <option value="1">Title 1</option>
    <option value="2">Title 2</option>
 </select>

"form-control" 클래스를 가진 요소에는 기본적으로 "외관" 속성이 "없음"으로 설정되어 있습니다.따라서 부트스트랩에서 선택 태그의 캐럿(드롭다운 기호)을 표시하려면 BOOTTRAP 스타일을 css보다 낮게 덮어써야 합니다.

select.form-control{
    -webkit-appearance: menulist!important;
    -moz-appearance: menulist!important;
    -ms-appearance: menulist!important;
    -o-appearance: menulist!important;
    appearance: menulist!important;
}

<!--CDNs of External Libraries to load bootstrap-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<!--Select Tag in html-->
<select class="form-control">
  <option value="">Select Option</option>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
  <option value="Option 4">Option 4</option>
  <option value="Option 5">Option 5</option>
</select>

다음과 같은 방법으로 동작했습니다. (다음 편집에서는 Chrome의 문제를 수정했습니다.)

select.form-control { -webkit-appearance: menulist; }

안녕하세요 저는 당신의 샘플 코드로 이 문제를 재현하려고 합니다.
그러나 나는 그 결과 특정 화살표 누락 문제에 직면하지 않았다.

.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;}

<select class="form-control" onchange="location = this.value;">
            <option>Select a Generic Name</option>
            <option value="1">Title 1</option>
            <option value="2">Title 2</option>
 </select>

주의: 다음 css가 선택 드롭다운에 사용되지 않도록 하십시오.

select {
  /* for Firefox */
  -moz-appearance: none;
  /* for Chrome */
  -webkit-appearance: none;
}

/* For IE10 */
select::-ms-expand {
  display: none;
}

도움이 되길 바랍니다.

부트스트랩 선택 필드에서도 같은 문제가 발생했습니다.여기 그 문제를 확실히 해결할 수 있는 간단한 수업이 있다.

폼 컨트롤 클래스 옆에 custom-select 클래스를 추가합니다.

  <select class="form-control custom-select">
        <option>Select a Generic Name</option>
        <option value="1">Title 1</option>
        <option value="2">Title 2</option>
     </select>

사용하는 브라우저와 OS에 따라 모양이 다를 수 있는 화살표 표기가 표시됩니다.

언급URL : https://stackoverflow.com/questions/54864380/bootstrap-select-option-dropdown-down-arrow-not-showing