美化input type="file"的样式

- 日理万妓 2022-06-05 12:54 261阅读 0赞

原理：将原来的样式隐藏，然后自己写css和js

html部分：

<div class="file-input">  
  <p class="input-container">  
    上传图片  
    <input type="file" id="upload" accept="image/\*" multiple>  
  </p>  
  <span id="name"></span>  
</div>

css样式部分：

.file-input\{  
  line-height:30px;  
  position:relative;  
  margin-top:10px;  
\}  
.file-input .input-container\{  
  width:100px;  
  height:30px;  
  text-align:center;  
  background:\#3879d9;  
  color:\#fff;  
  border-radius:3px;  
\}  
.file-input input\{  
  position:absolute;  
  left:0;  
  top:0;  
  opacity:0;  
\}  
.file-input \#name\{  
  position:absolute;  
  left:100px;  
  top:0;  
  font-size:12px;  
  color:\#666;  
\}

js控制部分：

var upload=document.getElementById('upload');  
var nameContainer=document.getElementById('name');  
  
  
upload.οnchange=function()\{  
  var name=\[\];  
  for(var i=0;i<this.files.length;i++)\{  
    name\[i\]= this.files\[i\].name;  
    if(this.files\[i\].size>=307200)\{  
      alert("文件"+this.files\[i\].name+"过大，不能超过300kb")  
      \}  
  \}  
  nameContainer.innerHTML=name;  
\}

发表评论取消回复

表情：

评论列表（有 0 条评论，261人围观）

还没有评论，来说两句吧...

相关阅读

相关 input 的placeholder样式

当我们给部分 input 类型的设置 placeholder 属性的时候，有的时候需要修改其默认的样式。 input::-webkit-input-place

谁借莪１个温暖的怀抱￠/ 2023年07月18日 15:30/ 0 赞/ 3 阅读

相关 input file 样式美化

input file 样式美化 [点击查看文件上传美化][Link 1][https://www.buruyouni.com/static/demo/%E6%96%87%E4

冷不防/ 2023年07月12日 14:25/ 0 赞/ 16 阅读

相关 checkbox样式美化修改复选框样式

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMT

忘是亡心i/ 2023年02月17日 11:20/ 0 赞/ 51 阅读

相关美化的表格样式

<html> <head> <title></title> <style type="text/css"> body,table\{ fo

末蓝、/ 2023年01月13日 15:52/ 0 赞/ 187 阅读

相关美化 file input 框

1. 浏览器端显示 ![SouthEast][] 2. 示例下载（免积分） [美化file input.zip][file input.zi

雨点打透心脏的1/2处/ 2022年08月10日 17:34/ 0 赞/ 213 阅读

相关美化input type="file"的样式

原理：将原来的样式隐藏，然后自己写css和js html部分： <div class="file-input"> <p class="input-container

- 日理万妓/ 2022年06月05日 12:54/ 0 赞/ 262 阅读

相关【HTML】上传文件input样式美化

起因，最近因为一些原因，在写一个前端小页面，但是上传文件的样式怎么调整都不是很满意。遂转变思维想到了如下方法。传统写法 <form id="upform" e

Love The Way You Lie/ 2022年05月27日 12:57/ 0 赞/ 1139 阅读

相关 html checkbox样式美化

1.html写法 <label class="my_protocol"> <input class="input_agreement_protoc

水深无声/ 2022年04月18日 03:06/ 0 赞/ 480 阅读

相关 CSS小技巧--input checkbox css 样式美化

更改默认样式为： HTML <input class="magic-checkbox" type="checkbox" name="layout" id="yyc1

素颜马尾好姑娘i/ 2022年01月10日 08:15/ 0 赞/ 613 阅读

相关 CSS - input 美化

input\{ padding: 20px; width: 100%; height: 5vh; margin-bottom: 2vh; border-radius:

超、凢脫俗/ 2021年11月01日 07:31/ 0 赞/ 416 阅读