首頁 > web前端 > html教學 > 如何自定义<input type="file">的样式?_html/css_WEB-ITnose

如何自定义<input type="file">的样式?_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:26:42
原創
779 人瀏覽過

写了个上传图片的手机网页,里面用到了,在手机网页上显示的是这个样子:

它有“拍照”、“图片”和“文件”三个按钮,希望只保留“拍照”和“图片”,去掉“文件”,该如何实现?


回复讨论(解决方案)

隐藏.按钮样式该怎么写还怎么写。用js或jqeury触发file的click事件。

三个是用一张图片吗?然后用JS打开选择要上传的文件?
如果是的需要改下css的显示位置。把文件的去掉

代码都没有,你要人家怎么帮你。。

.filebox{width:120px;overflow:hidden;position:relative;}/*让部分file不显示*/.filebox input:file{position:absolute;left:0;top:0;z-index:2;opacity:0;}/*透明,绝对定位*/.filebox span{display:block;width:60px;line-height:28px;float:left;}/*模拟按钮*/
登入後複製

<div class="filebox">    <input type="file" />    <span class="camera">拍照</span>    <span class="picture">图片</span></div>
登入後複製


样式可能有问题,只是示例。

三个是用一张图片吗?然后用JS打开选择要上传的文件?
如果是的需要改下css的显示位置。把文件的去掉
没有用到任何图片或样式,就是这么个,手机浏览器解析出来就是那个效果

代码都没有,你要人家怎么帮你。。
斑竹大人,我的代码就是这些:

<html xmlns="http://www.w3.org/1999/xhtml"><body><form method="post" action="/" enctype="multipart/form-data">	<input type="file" name="file" size="60" id="file" /><br /><br />					<input type="submit" value="上传" class="button" /></form>	      </body></html>
登入後複製
登入後複製
登入後複製

貌似这个标签,手机的浏览器解析出来包括了拍照、图片和文件这三个按钮,我就是想把“文件”这个按钮去掉,不知道该怎么实现

4楼 正解 把file做百分百大小 透明 它的样式是其它模块去做展示


代码都没有,你要人家怎么帮你。。
斑竹大人,我的代码就是这些:

<html xmlns="http://www.w3.org/1999/xhtml"><body><form method="post" action="/" enctype="multipart/form-data">	<input type="file" name="file" size="60" id="file" /><br /><br />					<input type="submit" value="上传" class="button" /></form>	      </body></html>
登入後複製
登入後複製
登入後複製

貌似这个标签,手机的浏览器解析出来包括了拍照、图片和文件这三个按钮,我就是想把“文件”这个按钮去掉,不知道该怎么实现

你浏览器啊,这么牛。。android+firefox/chrome看了没有问题啊



代码都没有,你要人家怎么帮你。。
斑竹大人,我的代码就是这些:

<html xmlns="http://www.w3.org/1999/xhtml"><body><form method="post" action="/" enctype="multipart/form-data">	<input type="file" name="file" size="60" id="file" /><br /><br />					<input type="submit" value="上传" class="button" /></form>	      </body></html>
登入後複製
登入後複製
登入後複製

貌似这个标签,手机的浏览器解析出来包括了拍照、图片和文件这三个按钮,我就是想把“文件”这个按钮去掉,不知道该怎么实现

你浏览器啊,这么牛。。android+firefox/chrome看了没有问题啊
我用的是安卓+UC浏览器,您可以访问下http://115.28.14.43:900/test.html试试

<html xmlns="http://www.w3.org/1999/xhtml"><body><head><style type="text/css">.uploadimg{width:185px;overflow:hidden;position:relative;}</style></head><form method="post" action="/" enctype="multipart/form-data">    <div class="uploadimg"><input type="file" name="file" size="60" id="file" /><br /><br /></div>                   <input type="submit" value="上传" class="button" /></form>          </body></html>
登入後複製

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板