레일에 f.file.field의 모양 사용자 정의

Question

<div id="photo_attachment_container"> 
     <%= f.file_field :photo %> 
    </div> 

현재이 모양은 버튼처럼 보입니다.이 버튼의 모양 (예 : 치수 배경 등)을 사용자 정의하고 사용자 정의 할 수 있습니까? 감사합니다

Answer 1

HTML 파일 필드는 HTML 양식 컨트롤 중에서 가장 사용자 정의 할 수있는 항목 중 하나입니다. 다른 문제는 브라우저와 OS간에 다르게 렌더링된다는 것입니다. 이러한 컨트롤의 스타일을 지정하는 가장 좋은 방법은 원하는대로 스타일이 지정된 다른 단추 나 요소 집합 위에 투명 요소로 파일 컨트롤을 렌더링하는 것입니다. 파일 컨트롤은 사용자가 클릭하여 활성화 할 필요는 없지만 최상위 레이어에 있어야합니다 (클릭 또는 포커스 이벤트를 보내면 내 테스트에서 작동하지 않습니다).

<div id="test"> 
    <div class="wrapper"> 
     <input type="file" /> 
    </div> 
    <button>Select a file</button> 
</div> 

CSS의 래퍼 DIV 및 버튼과 절대 위치 요소를 렌더링 :

는 여기에 몇 가지 예를 들어 HTML입니다. 파일 필드가 들어있는 랩퍼가 투명한 동안 단추는 표시되고 스타일이 적용됩니다. 래퍼 필드를 설정하여 투명도를 줄이면 위에 마우스를 가져 가면 아래의 스타일이 지정된 단추를 기준으로 위치를 보여줍니다.

#test { 
    position: relative; 
} 

#test .wrapper { 
    opacity: 0; 
    cursor: pointer; 
    position: absolute; 
    top: 0; 
    z-index: 2; 
} 

#test .wrapper:hover { 
    opacity: 0.5; 
} 

#test button { 
    background-color: #ccc; 
    border: none; 
    color: #666; 
    padding: 3px 5px; 
    border-radius: 5px; 
    position: relative; 
    top: 0; 
    z-index: 1; 
} 

JS 피들의 예.

http://jsfiddle.net/JgDuh/

편집 :

당신이 당신의 의견에 묻는 질문에 대답하기 위해, 당신은 당신의 레일 위의 대답은 다음과 같이 템플릿을 볼 구조 것이다 :

<div id="photo_attachment_container"> 
    <div class="wrapper"> 
    <%= f.file_field :photo %> 
    </div> 
</div> 

이로 렌더링 것 (form_for에 전달한 모델의 대체품으로 user을 사용했습니다.

<div id="photo_attachment_container"> 
    <div class="wrapper"> 
    <input type="file" id="user_photo" name="user[photo]" /> 
    </div> 
</div>