div >
VIDEO
메모: 우리는 ' 숨겨진 선택 '를 지정하려면 ' -옵션을 선택하세요- '를 기본 옵션으로 사용합니다. 그러나 사용자가 그 중 하나를 선택하면 숨겨집니다.
이제 CSS로 이동하여 스타일을 지정합니다.
2단계: CSS를 사용한 스타일 드롭다운 메뉴
우리는 ' div ' 생성된 컨테이너에 액세스하고 div의 배경색을 ' RGB(191, 207, 235) '. 또한 div의 높이, 텍스트의 글꼴 크기, 텍스트의 색상을 ' 150픽셀 ', ' 초대형 ', 그리고 ' RGB(2, 0, 0) ', 각각. 다음으로 div의 테두리를 ' 5픽셀 ', ' 산등성이 ', 그리고 ' RGB(108, 75, 209) '.
CSS
div { ( 191 , 207 , 235 ) ; ( 둘 , 0 , 0 ) ; ( 108 , 75 , 209 ) ; }
이제 드롭다운 메뉴의 스타일을 지정하고 메뉴의 배경색을 ' RGB(194, 222, 209) '로 표시되고 메뉴의 테두리는 ' 3px ', ' 단단한 ', 그리고 ' RGB(84, 73, 116) '. 그런 다음 메뉴의 너비, 높이 및 글꼴 크기를 ' 300픽셀 ', ' 30픽셀 ' 그리고 ' 크기가 큰 ', 각각:
고르다 { ( 194 , 222 , 209 ) ; ( 84 , 73 , 116 ) ; }
출력에서 볼 수 있듯이 HTML 및 CSS를 사용하여 드롭다운 메뉴가 성공적으로 생성되고 스타일이 지정됩니다.
위에서 제공된 출력에서 드롭다운 메뉴가 생성된 것을 볼 수 있으며 이를 통해 기본 설정에 따라 옵션을 선택할 수 있습니다. CSS를 사용하여 선택한 옵션 색상을 변경하는 다음 섹션으로 이동합니다.
CSS를 사용하여 선택한 옵션의 색상을 변경하는 방법은 무엇입니까?
메뉴의 선택된 옵션 색상을 변경하려면 ' : 체크 ” CSS의 선택자를 사용합니다. :checked는 '와 같은 입력 유형 요소에만 연결할 수 있는 의사 클래스 요소입니다. 옵션 ', ' 체크박스 ', 그리고 ' 라디오 버튼 '. 주로 이러한 요소의 선택된 값의 동작을 변경하는 데 사용됩니다.
통사론
:checked의 구문은 다음과 같습니다.
element_name:체크됨 { }
CSS 선언에서 옵션, 체크박스 및 라디오의 선택된 값에 대한 코드를 작성할 수 있습니다.
이제 메뉴로 이동하여 :checked 선택기를 사용하여 선택한 옵션의 색상을 변경합니다. 이를 위해 ' 옵션 ' 메뉴에서 생성된 옵션에 액세스하고 ' : 체크 ' 선택한 메뉴 옵션에 의사 클래스를 추가합니다. 선택한 옵션의 동작을 변경할 수 있습니다. 다음으로 선택한 옵션의 색상을 ' RGB(246, 250, 0) '로 표시되고 선택한 옵션의 배경이 ' RGB(5, 26, 1) ':
옵션:선택 { ( 246 , 250 , 0 ) ; ( 5 , 26 , 1 ) ; }
다음 출력에서 볼 수 있듯이 배경 및 선택한 옵션 색상이 변경됩니다.
CSS를 사용하여 선택한 옵션 색상을 변경하는 방법을 설명했습니다.
결론
' : 체크 ” 의사 클래스의 선택자는 선택한 옵션 색상을 변경하는 데 사용됩니다. :checked는 ' 옵션 ' 드롭다운 메뉴에서 선택한 후 선택한 옵션의 색상을 설정할 수 있습니다. 이 매뉴얼에서는 드롭다운 메뉴를 생성하고 스타일을 지정하는 방법을 설명하고 CSS를 사용하여 선택한 옵션 색상을 변경하는 절차를 보여주었습니다.