선택 상자의 드롭다운 화살표가 표시되지 않음

선택 상자의 드롭다운 화살표가 표시되지 않음

워드프레스 테마와 HTML을 사용하고 있습니다.select박스에는 드롭 다운 영역이 없습니다.그냥 평범해 보여input텍스트 상자를 클릭하면 드롭다운 목록이 나타납니다.드롭 다운 화살표를 제거하는 코드를 찾을 수 없습니다.

CSS에 표시되는 것은 이것뿐입니다.

input:focus {
outline: none;
}

select,
input,
textarea {
-webkit-appearance: none;
-webkit-border-radius:0; 
border-radius:0; 
}

다음은 기본 선택 요소와 해당 옵션을 보여 줍니다.

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

이제 문제가 어디에 있는지 알아보겠습니다.

select {
  /*webkit browsers */
  -webkit-appearance: none;
  /*Firefox */
  -moz-appearance: none;
  /* modern browsers */
  appearance: none;
  border-radius: 0;

}

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

설정할 때none로.appearance화살표를 제거하고, 설정했을 때0로.border-radius를 삭제합니다.border의select디폴트입니다.

화살표를 복원하려면appearance로.menulist(디폴트값) 또는listbox또는auto.

NB: 이 규칙으로 IE에서 화살표를 숨긴 경우select::-ms-expand { display: none; }, 로 설정할 필요가 있습니다.display: block화살을 되찾기 위해서요

재지정되었습니다.-webkit-appearance의 재산.select로 설정되어 있습니다.-webkit-appearance: menulist;브라우저에 의해 기본값으로 지정됩니다.

제가 이렇게 늦게 대답하는 건 알지만, 제게는 효과가 있었고 누군가에게 도움이 될지도 몰라요.그냥 이 CSS를 통과해.

select{
-webkit-appearance: listbox !important
}

정답은 대부분 맞지만 나에게는 통하지 않았다.이것으로 성공했습니다.

select::-ms-expand { display: block; }

포장할 수 있습니다.select에 있어서div그 때문에div줄 수 있다::after요소 및 스타일:

div:after{
    position: absolute;
    top: 4px;
    right: 10px;
    color: #768093;
    font-family: #whichever font you wanna use# e.g Fontawesome;
    font-size: 20px;
    content: "\e842";
}

div:after{ 
    position: absolute;
    visibility: visible;
    font-family: FontAwesome;
    content: "\f096";
    font-size: 18px;
}

위의 솔루션을 시도했지만 를 사용하여 생성된 UI에서는 작동하지 않았습니다.jquery.min.css아래 css를 시도해보니 문제가 해결되었습니다.내가 목표로 하는 것은.ui-icon-carat-d여기에는 드롭다운 화살표와 설정 드롭다운 아이콘이 표시됩니다.

.ui-icon-carat-d:after{
    background: url("https://cdn1.iconfinder.com/data/icons/pixel-perfect-at-16px-volume-2/16/5001-128.png") 95% 32% !important;
    background-repeat: no-repeat !important;
    background-color: #fff !important;
}

저도 같은 문제가 발생했는데, 아래 jquery 파일 jquery-3.4.1.js를 추가한 후 드롭다운 화살표가 표시되었습니다.

<script type="text/javascript" src="~/Scripts/jquery-3.4.1.js">

select {
  -webkit-appearance: none;
  /*webkit browsers */
  -moz-appearance: none;
  /*Firefox */
  appearance: none;
  /* modern browsers */
  border-radius: 0;

}

<select>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

언급URL : https://stackoverflow.com/questions/31417160/drop-down-arrow-in-select-boxes-not-showing