CSS를 사용하여 HTML 요소의 스타일을 어떻게 지정할 수 있나요?

스타일<옵션> CSS가 있는 요소

JavaScript를 사용하여 드롭다운을 사용자 정의하는 것과 달리 내의 요소 브라우저 비호환성으로 인해 CSS만 사용하는 요소입니다.

브라우저 간 호환성

IE9, Firefox, Chrome과 같은 브라우저의 경우 다음 CSS 속성을 사용하여 부분적인 스타일을 제공할 수 있습니다. 옵션:

• -webkit-appearance: 없음; (WebKit 브라우저)
• -moz-appearance: 없음; (Firefox)
• 외관: 없음; (최신 브라우저)

이러한 속성은 드롭다운의 기본 스타일을 제거할 수 있지만 추가 사용자 정의는 제한됩니다.

대체 솔루션

비슷한 모양을 얻으려면

HTML 및 CSS를 사용하여 요소를 사용자 정의 드롭다운에 추가합니다.

1. 드롭다운을 나타내는 요소입니다.
2. HTML을 사용하여
   • 가 있는 요소 드롭다운 옵션에 대한 태그입니다.
   • 처음에 display: none을 사용하는 요소; CSS 속성입니다.
     • 요소에서 display: block;을 설정하여

       요소를 추가하고 테두리, 패딩, 배경색 스타일을 추가합니다.
       • 대화형 효과를 위한 마우스 오버 및 활성 상태.

예

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

위 내용은 CSS를 사용하여 HTML 요소의 스타일을 어떻게 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!