Làm thế nào để bạn tạo kiểu cho các trường tệp mẫu với nền tảng zurb?

Question

Tôi đang cố tạo nút bằng Zurb Foundation bằng Rails để tải ảnh lên. Tôi đã thử điều này:

<input class="tiny round disabled button" name="picture[picture]" type="file"> 

Thật không may, nó không hoạt động và tạo hai nút khác nhau cho phép bạn chọn ảnh. Có điều gì tôi cần làm đặc biệt cho các trường tệp không?

Answer 1

tôi đã tìm thấy khu vực này là rất hữu ích với kiểu phong cách input = "file":

http://www.quirksmode.org/dom/inputfile.html

Đó là điều rất khó khăn nhưng điều này chủ yếu liên quan đến layering đầu vào thực tế bằng một IP giả mà có bạn kiểu dáng được áp dụng cho nó.

<div class="file-inputs"> 
    <input type="file" class="hidden-input"> 
    <div class="fake-input"> 
     <input> 
     <img src="images/YOURBUTTON.png"> 
    </div> 
</div> 

Để đi với CSS sau đây:

div.file-inputs { 
position: relative; 
} 

div.hidden-input { 
position: absolute; 
top: 0px; 
left: 0px; 
z-index: 1; 
} 

input.file { 
position: relative; 
    text-align: right; 
-moz-opacity:0 ; 
filter:alpha(opacity: 0); 
opacity: 0; 
z-index: 2; 
} 

Answer 2

Tuỳ chỉnh nút tập tin tải lên sử dụng html css và js

Html mã:

<div class="custom-file-upload"> 
    <!--<label for="file">File: </label>--> 
    <input type="file" id="file" name="myfiles[]" multiple /> 
    </div> 

CSS:

.custom-file-upload-hidden { 
    display: none; 
    visibility: hidden; 
    position: absolute; 
    left: -9999px; 
} 

.custom-file-upload { 
    display: block; 
    width: auto; 
    font-size: 16px; 
    margin-top: 30px; 
} 
    .custom-file-upload label { 
    display: block; 
    margin-bottom: 5px; 
} 

.file-upload-wrapper { 
    position: relative; 
    margin-bottom: 5px; 
} 

.file-upload-input { 
    width: 300px; 
    color: #fff; 
    font-size: 16px; 
    padding: 11px 17px; 
    border: none; 
    background-color: #c0392b; 
    -moz-transition: all 0.2s ease-in; 
    -o-transition: all 0.2s ease-in; 
    -webkit-transition: all 0.2s ease-in; 
    transition: all 0.2s ease-in; 
    float: left; 
    /* IE 9 Fix */ 
} 

.file-upload-input:hover, .file-upload-input:focus { 
    background-color: #ab3326; 
    outline: none; 
} 

.file-upload-button { 
    cursor: pointer; 
    display: inline-block; 
    color: #fff; 
    font-size: 16px; 
    text-transform: uppercase; 
    padding: 11px 20px; 
    border: none; 
    margin-left: -1px; 
    background-color: #962d22; 
    float: left; 
    /* IE 9 Fix */ 
    -moz-transition: all 0.2s ease-in; 
    -o-transition: all 0.2s ease-in; 
    -webkit-transition: all 0.2s ease-in; 
    transition: all 0.2s ease-in; 
} 

.file-upload-button:hover { 
    background-color: #6d2018; 
} 

JS Mã sản phẩm: http://codepen.io/wallaceerick/pen/fEdrz kiểm tra này để biết chi tiết hoàn chỉnh

Answer 3

Bí quyết là phải làm cái gì đó trông như thế này:

HTML

<button class="file-upload">Upload 
    <input type="file" name="files" /> 
</button> 

CSS

button.file-upload > input[type='file'] { 
    cursor: pointer; 
    position: absolute; 
    font-size: 0; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    height: 100%; 
    width: 100%; 
} 

Sử dụng nền tảng v5.5.2: http://codepen.io/soyuka/pen/xGMPKJ