Hướng dẫn custom input type=file css codepen - loại đầu vào tùy chỉnh = tệp css codepen

Đầu vào loại = tệp CSS CSS tùy chỉnh CSS

Thêm CSS¶. Đặt màn hình của lớp "Container" thành "Flex" và đặt cả hai thuộc tính căn chỉnh và các thuộc tính nội dung biện minh thành "flex-start". ASLO Thêm thuộc tính chiều rộng được đặt thành "100%".

Bạn có thể áp dụng CSS cho bút của bạn từ bất kỳ bảng kiểu nào trên web. Chỉ cần đặt một URL vào đây và chúng tôi sẽ áp dụng nó, theo thứ tự bạn có chúng, trước CSS trong chính bút. Nếu bảng kiểu bạn liên kết để có phần mở rộng tệp của bộ tiền xử lý, chúng tôi sẽ cố gắng xử lý nó trước khi đăng ký.

Xem hình ảnh động tập trung vào đầu vào CSS của Daniandl trên Codepen. CSS tinh khiết - Thiết kế vật liệu đầu vào. Một thiết kế vật liệu đơn giản dựa trên đầu vào sử dụng CSS tinh khiết. Xem Pen Pure CSS - Thiết kế vật liệu đầu vào của JorgeBrunetto (@jorgebrunetto) trên Codepen. Mở rộng trường đầu vào CSS. Một trường đầu vào CSS mở rộng khi nhấp vào nó.

Kiểu đầu vào tệp tùy chỉnh

Kiểu đầu vào bằng cách chỉ định các thuộc tính màu, kích thước phông chữ, đỉnh và bên trái. Đặt vị trí thành "Tuyệt đối" và chỉ định z-index. Đặt vị trí thành "tương đối" cho trình bao bọc để phần tử được đặt so với vị trí bình thường của nó.

Anh ta đã phàn nàn về việc nó sẽ không thay đổi kích thước, nhưng bây giờ với kích thước phông chữ. Trích dẫn: "Vấn đề chính của tôi với cách tiếp cận của QuirksMode này là nút tệp vẫn sẽ có kích thước do trình duyệt xác định, vì vậy nó sẽ không tự động điều chỉnh theo bất cứ thứ gì được sử dụng dưới dạng nút được đặt bên dưới nó.

Nhập loại = Tệp CSS Style W3Schools

Tạo và phong cách đầu vào tệp với HTML và CSS một cách khó khăn. Thực hiện theo các bước đã cho và tạo mã mà không bao gồm bất kỳ JavaScript nào.

Đầu vào tìm kiếm hoạt hình. Trong ví dụ này, chúng tôi sử dụng thuộc tính chuyển đổi CSS để làm động độ rộng của đầu vào tìm kiếm khi nó được lấy nét. Bạn sẽ tìm hiểu thêm về thuộc tính chuyển tiếp sau này, trong chương chuyển đổi CSS của chúng tôi.

Bộ chọn :: Bộ chọn giữ chỗ chọn các yếu tố biểu mẫu với văn bản giữ chỗ và cho phép bạn tạo kiểu cho văn bản trình giữ chỗ. Văn bản giữ chỗ được đặt với thuộc tính giữ chỗ, trong đó chỉ định một gợi ý mô tả giá trị dự kiến ​​của trường đầu vào. Mẹo: Màu mặc định của văn bản giữ chỗ có màu xám nhạt trong hầu hết các trình duyệt.

Thuộc tính chấp nhận chỉ định một bộ lọc cho những loại tệp mà người dùng có thể chọn từ hộp thoại đầu vào tệp (chỉ cho loại = "tệp"). Lưu ý: Thuộc tính chấp nhận chỉ có thể được sử dụng với. Mẹo: Không sử dụng thuộc tính này như một công cụ xác thực. Tải lên tệp phải được xác thực trên máy chủ.

Codepen đầu vào tệp tùy chỉnh

Về tiền xử lý HTML. Bộ tiền xử lý HTML có thể làm cho việc viết HTML mạnh mẽ hơn hoặc thuận tiện hơn. Chẳng hạn, Markdown được thiết kế để dễ dàng viết và đọc cho các tài liệu văn bản và bạn có thể viết một vòng lặp trong pug.

Mọi thứ chắc chắn đã trở nên dễ dàng hơn so với chúng! Lý do là cuối cùng chúng ta cũng có thể tạo kiểu cho :: Trước và :: sau các yếu tố giả trên chính thẻ. Điều này có nghĩa là chúng tôi có thể giữ và tạo kiểu và won cần bất kỳ yếu tố bổ sung nào.

Xem đầu vào chữ số chấm của Godje trên Codepen. Thẻ CSS trong đầu vào. Một cách thú vị để hiển thị mật khẩu 4 chữ số bằng các đầu vào CSS & JS. Xem các thẻ CSS PEN trong đầu vào của Ravid7000 trên CodePen. CSS đầu vào thay đổi phong cách trực tiếp. Đầu vào này có thể thay đổi phong cách của anh ấy thông qua 3 nút thành nghiêm túc, hiện đại hoặc táo tợn với một hình ảnh hoạt hình phong cách đẹp.

---

Bạn có thể thích:

• Cập nhật mô hình Django ()
• Net Core Cli
• Hướng dẫn xác thực hình thức Django
• JQuery Event Wildcard
• Số kiểm tra là số nguyên hoặc không PHP
• Sự khác biệt giữa đơn và đầu tiên trong linq
• Bootstrap 3 vs 4 hiệu suất
• c Thao tác chuỗi tiền xử lý
• C# đa hình
• Chế độ xem MySQL và sửa đổi công cụ lưu trữ mặc định

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo nút tải lên tệp thân thiện và thân thiện với người dùng với CSS và HTML thuần túy.

Đánh dấu

Để tải lên các tệp, bạn sẽ cần sử dụng thẻ input với thuộc tính type="file". Ngoài ra, bạn có thể chỉ định loại tệp nào mà bạn cho phép tải lên thông qua thuộc tính accept.

HTML:

 type="file" accept="image/*">

Đánh dấu này tạo ra một nút có tiêu đề chọn tệp theo sau là một văn bản cho biết tên tệp khi được chọn. Theo mặc định, nó không được chọn tệp.

Result:

Đầu vào với Tệp Tệp Mặc định Nhìn khác nhau trên các trình duyệt khác nhau:

Kiểu dáng

Cấu trúc tiện ích tải lên bao gồm một khối hiển thị nút và tên tệp. Người dùng có thể nhấp vào bất cứ nơi nào bên trong khối hoặc kéo một tệp từ máy tính để bàn và nó sẽ mở cửa sổ tải lên.

Tạo kiểu cho khối tệp tải lên

Nếu bạn áp dụng các kiểu cho bộ chọn input[type=file], nó sẽ đặt chúng cho toàn bộ khối tiện ích, đó là nút và văn bản.

CSS:

input[type=file] {
  width: 350px;
  max-width: 100%;
  color: #444;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #555;
}

Kết quả đã trông tốt hơn nhiều vì nó cho biết vùng nơi người dùng có thể nhấp hoặc kéo tệp.

Result:

Tạo kiểu cho nút tải lên

Theo mặc định, nút Chọn tệp có kiểu tác nhân người dùng đơn giản. Để tạo kiểu nút với CSS, bạn nên sử dụng phần tử giả ____99 để chọn nó. Nó được hỗ trợ trong tất cả các trình duyệt hiện đại.

CSS:

input[type=file]::file-selector-button {
  margin-right: 20px;
  border: none;
  background: #084cdf;
  padding: 10px 20px;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: background .2s ease-in-out;
}

input[type=file]::file-selector-button:hover {
  background: #0d45a5;
}

Kết quả

Tạo kiểu cho vùng nhấp chuột/thả

Nếu bạn sẽ đi xa hơn một chút, bạn có thể tạo một vùng lớn nơi người dùng có thể nhấp và kéo các tệp. Vùng lớn này sẽ giúp mọi người sử dụng tiện ích dễ dàng hơn, vì nó không cần phải chính xác khi kéo một tệp, đặc biệt là trên các màn hình nhỏ hơn.

Để thực hiện một vùng thả lớn, bạn sẽ cần kết gói tệp của mình input vào thẻ

input[type=file] {
  width: 350px;
  max-width: 100%;
  color: #444;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #555;
}

1 và chỉ định một văn bản mô tả sẽ cho người dùng biết cách sử dụng tiện ích.

HTML

 for="images" class="drop-container">
   class="drop-title">Drop files here
  or
   type="file" id="images" accept="image/*" required>

Đối với bố cục, chúng ta cần đặt

input[type=file] {
  width: 350px;
  max-width: 100%;
  color: #444;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #555;
}

2 thành

input[type=file] {
  width: 350px;
  max-width: 100%;
  color: #444;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #555;
}

3 với các thuộc tính liên quan đến flex để định vị. Các thuộc tính

input[type=file] {
  width: 350px;
  max-width: 100%;
  color: #444;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #555;
}

4 và

input[type=file] {
  width: 350px;
  max-width: 100%;
  color: #444;
  padding: 5px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #555;
}

5 cho tỷ lệ. Và cuối cùng, thêm một số phong cách ưa thích như hiệu ứng đường viền và di chuột để làm nổi bật vùng tải lên tệp và bạn đã sẵn sàng để đi.

CSS:

.drop-container {
  position: relative;
  display: flex;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 200px;
  padding: 20px;
  border-radius: 10px;
  border: 2px dashed #555;
  color: #444;
  cursor: pointer;
  transition: background .2s ease-in-out, border .2s ease-in-out;
}

.drop-container:hover {
  background: #eee;
  border-color: #111;
}

.drop-container:hover .drop-title {
  color: #222;
}

.drop-title {
  color: #444;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  transition: color .2s ease-in-out;
}

Result:

Thả tệp ở đây hoặc or

Thử nghiệm

Xem ví dụ đầy đủ trên Codepen:

Xem bút không có tiêu đề của Nikita Hlopov (@nikitahl) trên Codepen.