900字范文 > 利用css对input[type=file] 样式进行美化 input上传按钮美化

利用css对input[type=file] 样式进行美化 input上传按钮美化

时间：2021-05-30 15:52:31

独角兽企业重金招聘Python工程师标准>>>

<input type="file" name="fileUpload"/>

的效果是这样的：

利用css可以变成如下效果：

demo:

<!DOCTYPE html><html><head><title>demoInput.html</title><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html"><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css"/><link rel="stylesheet" href="/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"/><style>#fileUpLoadBox{ position: relative; width: 1050px; height: 100px; background-color: #9ebde0;; background-position: 0 0; background-attachment: scroll; line-height: 37px; text-align: center; color: white; cursor: pointer; overflow: hidden; z-index: 1; } #fileUpLoadBox input { position: absolute; width: 1050px; height: 100px; line-height: 40px; font-size: 23px; opacity: 0; filter: "alpha(opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; left: -5px; top: -2px; cursor: pointer; z-index: 2; } </style></head><body><br><div><form role="form" id="fileUploadForm" enctype="multipart/form-data" class="col-md-offset-1"><div class="form-group"id="fileUpLoadBox"><input type="file" name="uploadFile" id="InputFileEditor" class="field"/><h3>点击选择文件</h3><h1><i class="fa fa-fw fa-cloud-upload"></i></h1></div></form><div class="box-footer"><div id="showFileName" class="col-md-offset-4"></div><button type="submit" class="btn btn-primary col-md-offset-4 col-md-3" id="imsiFileUploadSubmit">上传</button></div></div></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。