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; }