CSS에서 선택 입력 상자의 배경을 제거하는 방법

HTML 양식 요소의 기본 스타일은 종종 약간 지루하고 영감이 없을 수 있습니다. 종종 디자인 개선이 필요한 요소 중 하나는 사용자에게 선택할 옵션 목록을 제공하는 데 사용되는 선택 입력 상자입니다. 이 기사에서는 CSS를 사용하여 선택 입력 상자의 기본 배경을 제거하는 방법을 보여줍니다.

이렇게 하면 선택한 입력의 모양을 사용자 정의하여 시각적으로 더 매력적이고 웹 사이트나 앱의 전체 디자인과 일관되게 만들 수 있습니다.

CSS의 다양한 입력 필드

이 문제를 해결하기 전에 먼저 알아야 할 기본 지식을 이해하겠습니다. 웹 페이지에서 사용자가 다루기 힘든 부분은 무엇입니까? 웹사이트에서는 데이터를 입력하고 제출하는 것을 입력 필드라고 합니다.

HTML에는 다양한 유형의 입력이 제공됩니다. 예를 들어

텍스트 영역, 라디오 버튼, 옵션 선택 등이 있습니다. 각 입력에는 서로 다른 기본 스타일이 있습니다. 대부분의 경우 웹사이트에 영향력을 주고 다른 웹사이트와 차별화하기 위해 사용자 정의 스타일을 사용해야 합니다.

웹사이트에서 사용되는 몇 가지 일반적인 입력 필드의 예는 다음과 같습니다.

으아아아

두 번째로 알아야 할 것은 이러한 입력의 "

상태"에 관한 것입니다. 데이터를 입력하기 위해 입력 필드와 상호 작용할 때마다 입력 필드를 "active" 상태라고 하며, 입력 필드를 터치하지 않으면 "inactive" 상태라고 합니다. 이를 설명하는 데 사용되는 또 다른 용어는 "집중" 및 "집중되지 않음" 상태입니다. 기본적으로 모든 입력은 초점이 맞지 않습니다.

이제 이 문제에 대한 해결책을 시작할 수 있습니다. CSS는 특정 입력 필드의 다르거나 특별한 상태를 대상으로 하는 다양한 "

pseudo-classes"를 제공합니다. 클래스 중 하나는 포커스 의사 클래스입니다. 이는 웹사이트에서 "focused" 상태에 있는 요소에 적용됩니다. 즉, 사용자가 키보드나 마우스로 요소를 클릭하여 요소와 상호 작용한다는 의미입니다. 초점이 맞춰졌을 때 입력 배경을 제거하기 위해 이 pseudo-class를 활용하겠습니다. 이를 위해 목표를 달성하기 위해 기본 스타일을 변경하겠습니다.

그러나 이는 사용자가 입력한 입력 유형에만 작동합니다. 종종 웹사이트에는 기존 옵션 목록이 포함된 드롭다운 목록이 포함되어 있으며 사용자는 주어진 목록에서 하나 이상을 선택할 수 있습니다.

다른 입력 양식과 마찬가지로 입력 필드이기도 하며 기본 스타일이 연결되어 있습니다. HTML의 선택 태그를 사용하여 사용자 정의 드롭다운 목록을 만들 수 있습니다. 주로 양식에서 사용자 데이터를 수집하는 데 사용됩니다. 다음은 select 태그를 사용한 드롭다운 목록의 예입니다.

예

으아아아

위의 예에서 이름 속성은 사용자가 제출한 후 참조하기 위한 것이며, id 속성은 제출 후 전송될 데이터에 액세스하는 데 사용됩니다. 사용자가 선택할 수 있는 옵션은 옵션 태그를 사용하여 목록에 더 쉽게 접근하고 구별할 수 있도록 할 수도 있습니다.

Example

의 중국어 번역은 다음과 같습니다:

Example

아래 예에서는 –webkit-appearance : none을 사용하여 배경을 완전히 제거할 수 있습니다.

으아아아

위 예제의 시각적 출력이 다르며 기본 회색 톤 배경색이 없다는 것을 이미 알 수 있듯이 또 다른 직관적이지 않은 접근 방식은

div

를 선택 상자의 컨테이너로 사용하는 것입니다. 너비 제한을 설정하고 오버플로를 숨기고 선택 상자의 너비를 컨테이너 div보다 약간 작게 만듭니다. 이렇게 하면 기본 스타일 화살표가 웹페이지에서 사라집니다. 이 기사에서 설명한 단일 레이블 포지셔닝과 달리 대부분의 개발자는 비슷한 상황에서 코드를 반복할 필요가 없도록 ID와 클래스를 사용하여 공통 스타일을 만듭니다.

결론

이 문서에서는 CSS에서 입력 배경을 제거하는 문제에 대한 솔루션을 설명합니다. 그 과정에서 우리는 입력 상자, 해당 유형, 기본 스타일 및 상태에 대해 배웠습니다. 또한 의사 클래스 선택자를 사용하여 요소의 특수한 상태를 대상으로 지정하는 방법도 배웠습니다.

위 내용은 CSS에서 선택 입력 상자의 배경을 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!