Helpex - Trao đổi & giúp đỡ Đăng nhập
9

Tôi đang cố gắng tạo một nút với Zurb Foundation bằng cách sử dụ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 ra 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ụ thể cho các trường tệp không?

9 hữu ích 0 bình luận 11k xem chia sẻ
4

Tôi thấy tài nguyên này rất hữu ích với việc tạo kiểu input type = "file":

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

Nó nổi tiếng là khó nhưng điều này về cơ bản liên quan đến việc phân lớp đầu vào thực tế với một đầu vào giả đã áp dụng kiểu của bạn 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:

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;
}
4 hữu ích 2 bình luận chia sẻ
1

Nút tải lên tệp tùy chỉnh sử dụng html css và js

Mã HTML:

    <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;
}

MÃ JS: http://codepen.io/wallaceerick/pen/fEdrz hãy kiểm tra mã này để biết chi tiết đầy đủ

1 hữu ích 0 bình luận chia sẻ
1

Bí quyết là làm một cái gì đó giống như sau:

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

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

1 hữu ích 3 bình luận chia sẻ
loading
Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ html css zurb-foundation , hoặc hỏi câu hỏi của bạn.

Có thể bạn quan tâm

loading