CSS를 사용하여 드롭다운 목록 선택 상자의 기본 스타일을 변경하는 방법 소개

이 글에서는 CSS를 사용하여 드롭다운 목록선택 상자의 기본 스타일을 변경합니다.

원칙

브라우저의 기본 드롭을 지우는 것이 원칙입니다. 박스 스타일을 다운한 후 적용하세요. 자신이 만든 것을 업로드하고 오른쪽에 정렬된 작은 화살표의 그림을 첨부하세요. 물론 오른쪽의 작은 화살표는 이전이나 이후에 의사 요소를 사용하여 구현할 수 있습니다.

select {  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #000;  /*将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("arrow.png") no-repeat right center;
  padding-right: 14px;
}/*清除ie的默认选择框样式清除，隐藏下拉箭头*/select::-ms-expand { display: none; }

호환성 문제

IE8/9는 모양을 지원하지 않습니다:없음 CSS속성이므로 IE 브라우저의 하위 버전과 호환되어야 하는 경우 해당 컨테이너는 작은 화살표를 덮는 데 사용됩니다. 그런 다음 작은 오프셋 또는 너비가 상위 요소보다 큽니다.를 선택하려면 오른쪽을 추가하세요. 작은 화살표를 덮기 위해 상위 CSS 속성을 그 이상으로 보이지 않도록 설정합니다. 그런 다음 배경 이미지나 의사 요소를 상위 컨테이너에 추가하여 사용자 정의 화살표를 구현합니다.

html 코드:

<div id="parentDiv">
  <select>
      <option>a</option>
      <option>b</option>
      <option>c</option>
  </select></div>

css 코드:

#parentDiv {
    background: url('ico.png') no-repeat right center;
    width: 80px;
    height: 34px;
    overflow: hidden;
}#parentDiv select {
    background: transparent;
    border: none;
    padding-left: 10px;
    width: 100px;
    height: 100%;
}

결함

드롭다운 옵션의 너비는 상위 컨테이너보다 넓어집니다. 다소 조화롭지 않은 것처럼 보이지만 이는 귀하의 선택과 프로젝트의 호환성에 따라 다릅니다.

위 내용은 CSS를 사용하여 드롭다운 목록 선택 상자의 기본 스타일을 변경하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!