사용 가능한 양식 요소의 스타일을 변경하려면 :enabled 의사 클래스 선택기를 사용하세요.

사용 가능한 양식 요소의 스타일을 변경하려면 :enabled 의사 클래스 선택기를 사용하세요. 구체적인 코드 예제가 필요합니다.

웹 개발에서 양식 요소는 없어서는 안될 부분입니다. 양식을 디자인할 때 사용자 경험을 개선하기 위해 상태에 따라 양식 요소의 스타일을 변경해야 하는 경우가 많습니다. 이와 관련하여 CSS 의사 클래스 선택기는 좋은 솔루션을 제공합니다. 일반적으로 사용되는 의사 클래스 선택기 중 하나는 활성화됩니다.

: 활성화된 의사 클래스 선택기는 사용 가능한 양식 요소를 선택하는 데 사용됩니다. 이러한 요소에 대한 특정 스타일을 설정하면 사용 가능한 양식 요소와 사용할 수 없는 양식 요소를 구분할 수 있으므로 보다 친숙하고 직관적인 사용자 인터페이스를 제공할 수 있습니다.

다음은 :enabled 의사 클래스 선택기를 사용하여 사용 가능한 양식 요소의 스타일을 변경하는 방법을 보여주는 몇 가지 구체적인 코드 예제입니다. 먼저 몇 가지 기본 스타일을 설정하여 양식 요소를 렌더링할 수 있습니다:

input, select, textarea {
  padding: 10px;
  border: 1px solid #ccc;
}

select {
  width: 200px;
}

textarea {
  resize: vertical;
}

input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

다음으로 :enabled 의사 클래스 선택기를 사용하여 사용 가능한 양식 요소와 사용할 수 없는 양식 요소를 구별하고 서로 다른 스타일을 설정할 수 있습니다. 예:

input:enabled, select:enabled, textarea:enabled {
  background-color: white;
  color: black;
}

input:disabled, select:disabled, textarea:disabled {
  background-color: #f9f9f9;
  color: #aaa;
}

위 코드를 사용하면 사용 가능한 양식 요소의 배경색을 흰색으로, 글꼴 색상을 검정색으로 설정하고, 사용할 수 없는 양식 요소의 배경색을 회색으로, 글꼴 색상을 밝은 회색으로 설정했습니다. . 이러한 방식으로 사용자는 양식을 작성할 때 사용 가능한 양식 요소와 사용할 수 없는 양식 요소를 명확하게 구분할 수 있습니다.

또한 :enabled 의사 클래스 선택기를 사용하여 테두리 색상 변경, 글꼴 크기 조정 등과 같은 사용 가능한 양식 요소에 대한 다른 스타일을 설정할 수도 있습니다. 예:

input:enabled {
  border-color: #4CAF50;
}

select:enabled {
  outline: 2px solid #4CAF50;
  font-size: 16px;
}

textarea:enabled {
  border-color: #4CAF50;
  font-family: Arial, sans-serif;
}

위 코드를 사용하여 사용 가능한 텍스트 입력 상자에 녹색 테두리 색상을 설정하고, 사용 가능한 드롭다운 메뉴에 녹색 외부 테두리를 설정하고 글꼴 크기를 조정하고, 사용 가능한 텍스트 입력 상자에 녹색을 설정합니다. 여러 줄의 텍스트 상자 테두리 색상 및 글꼴 스타일.

간단히 말하면 :enabled 의사 클래스 선택기를 사용하면 사용 가능한 양식 요소와 사용할 수 없는 양식 요소를 구별하는 데 도움이 되므로 보다 직관적이고 친숙한 사용자 인터페이스를 제공할 수 있습니다. 다양한 스타일을 설정함으로써 사용자에게 데이터를 입력할 수 있는 양식 요소와 사용할 수 없는 양식 요소를 명확하게 알릴 수 있습니다. 양식 요소의 스타일을 변경하는 이 방법은 양식을 작성하는 사용자의 효율성과 경험을 크게 향상시킬 수 있습니다. 이 글이 :enabled 의사 클래스 선택기를 더 잘 이해하고 적용하는 데 도움이 되기를 바랍니다.

위 내용은 사용 가능한 양식 요소의 스타일을 변경하려면 :enabled 의사 클래스 선택기를 사용하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!