CSS를 사용하여 업로드 입력의 스타일을 지정하려면 어떻게해야합니까?

사용자를 보호하기 위해 실제로 CSS로 업로드 스타일을 적용 할 수 없습니다. 따라서 해결책은 실제 업로드를 숨기고 사용자가 원하는 방식으로 보이는 다른 요소를 보여주는 것입니다.CSS를 사용하여 업로드 입력의 스타일을 지정하려면 어떻게해야합니까?

간단한 버튼이나 무언가를 통해 보이지 않는 실제 업로드를 숨겨서 버튼을 스타일링 할 수있는 방법을 보여 주지만 업로드 입력을 계속 클릭하는 방법을 보여줍니다.

그러나 실제 입력이 버튼 위에 떠 다니기 때문에 호버 상태를 작동시키지 못하는 문제가 있습니다.

내가이 문제에 잘못 접근하고 있습니까? 업로드 입력의 스타일을 어떻게 지정합니까? 내가 질문을 이해한다면

출처

2011-12-14 Xeoncross

좀 더 놀고 난 후에 나는 input 업로드 버튼 요소의 하위를 만들어서 마침내 작동 시켰습니다. button의 자식으로 input을 갖는 것이 올바르지 않기 때문에 업로드 버튼을 div로 만들어야했습니다.

See it in action here

출처

2011-12-15 18:11:49 Xeoncross

, 이것은 당신이

jsfiddle.net/yVFWJ/1/

.button { 
    width: 47px; 
    height: 19px; 
    cursor: pointer; 
    text-indent: -9999px; 
    border: none; 
    background-image: url(http://www.hudson-realestate.com/us/images/uploadButton.gif); 
}

출처

2011-12-14 19:51:22 Shepherd

사용자 정의 이미지로 배경을 대체 않습니다 음, -하지만 그 이미지가 응답하지 않습니다. 아마 나는 그것이 [완벽하게 작동하는 예제를 만들기 위해] [호버 상태 추가] (http://jsfiddle.net/Xeoncross/yVFWJ/5/)해야합니다. 그러나 [나는 또한 이것을 시도했다] (http://jsfiddle.net/Xeoncross/yVFWJ/2/) 그래서 이미지 대신 CSS와 텍스트를 사용할 수 있었다. – Xeoncross

네 원한다면 마우스를 올리면됩니다. – Shepherd

흠 ... 당신은 document.onmousemove 이벤트를 사용할 수 있습니다 달성하고자하는 것입니다. 거기에서 마우스 위치가 버튼 영역 안에 있는지 확인할 수 있습니다. 그럴 경우 버튼 클래스를 예 : "send_button_hover"로 변경하십시오. 그렇지 않은 경우 클래스를 예 : "send_button"으로 변경하십시오.

순수 JavaScript를 사용하여 수행 할 수 있습니다. 그다지 어렵지 않습니다. 그러나 jQuery를 사용하면 로이 더 쉽습니다. 당신은 핸드 이벤트를위한 mousemove() 함수를 가지고 있습니다; height() 및 width()은 버튼 dimmension을 계산하는 함수입니다. offset functions 버튼의 위치를 계산하고 toggleClass() 버튼의 클래스를 변경합니다.

출처

2011-12-14 19:57:28

CSS를 사용하여 업로드 입력의 스타일을 지정하려면 어떻게해야합니까?

답변

관련 문제