CSS를 사용하여 입력 버튼 이미지를 변경하고 브라우저 호환성 문제를 처리하려면 어떻게 해야 합니까?

CSS로 입력 버튼 이미지 변경

HTML을 사용하여 이미지로 입력 버튼을 생성할 때 "type=image" 속성이 사용됩니다. 소스 URL과 함께. 그러나 "src" 속성은 CSS를 통해 수정할 수 없기 때문에 CSS를 사용하여 버튼을 스타일링하는 것이 어렵습니다.

비이미지 입력 ​​버튼에 대한 CSS 스타일링

스타일을 지정하려면 CSS를 사용한 이미지 모양의 입력 버튼이 있는 경우 버튼 유형을 '제출'로 변경하는 것이 좋습니다. 이렇게 하면 이미지 소스에 대한 요구 사항이 제거됩니다.

<INPUT type="submit" class="myButton" value="" />

CSS 파일에서 다음과 같이 "myButton" 클래스를 정의합니다.

.myButton {
    background-image: url(/images/Btn.PNG);
    background-repeat: no-repeat;
    cursor: pointer;
    width: 200px;
    height: 100px;
    border: none;
}

이 접근 방식을 사용하면 호버 효과를 적용할 수 있습니다. "myButton:hover" 클래스를 정의합니다.

브라우저 호환성

Safari는 앞서 언급한 스타일링 방법을 어떤 버튼에서도 지원하지 않는다는 점에서 문제를 제기합니다. Safari를 지원하려면 이미지를 배치하고 양식을 제출하는 onclick 기능에 JavaScript를 사용하는 것이 좋습니다.

위 내용은 CSS를 사용하여 입력 버튼 이미지를 변경하고 브라우저 호환성 문제를 처리하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!