How to customize the style of <input type='file'>? _html/css

How to customize the style of ? _html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-06-24 12:26:42

Original

808 people have browsed it

I wrote a mobile webpage for uploading pictures, which uses . The display on the mobile webpage is like this:

It has "take photos", "pictures" " and "File" buttons. I want to keep only "Photography" and "Pictures" and remove "File". How to achieve this?

Reply to discussion (solution)

Hide . How to write the button style. Use js or jqeury to trigger the click event of the file.

Three with one picture? Then use JS to open and select the file to upload?
If yes, you need to change the display position of the css. Remove the

from the file. There is no code. How can you ask others to help you? .

.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;}/*模拟按钮*/

Copy after login

<div class="filebox">    <input type="file" />    <span class="camera">拍照</span>    <span class="picture">图片</span></div>

Copy after login

There may be something wrong with the style, just an example.

Three with one picture? Then use JS to open and select the file to upload?
If yes, you need to change the display position of the css. Remove the file
No pictures or styles are used, it’s just this , it will be the same effect when parsed by the mobile browser

There is no code, you want it How can I help you. .
Lord Bamboo, this is my code:

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

Copy after login

It looks like this tag , the mobile browser parsed out three buttons: photo, picture and file. I just want to remove the "File" button. I don't know how to achieve it

4th Floor Correct Answer Make the file 100% Size Transparent Its style is used for display by other modules

There is no code, how can you ask others to help you. .
Lord Bamboo, this is my code:

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

Copy after login

It looks like this tag , the mobile browser parsed out three buttons: photo, picture and file. I just want to remove the "file" button, but I don't know how to achieve it

Your browser is so awesome. . There are no problems after looking at android firefox/chrome

There is no code, how can you ask others to help you? .
Lord Bamboo, this is my code:

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

Copy after login

It looks like this tag , the mobile browser parsed out three buttons: photo, picture and file. I just want to remove the "file" button, but I don't know how to achieve it

Your browser is so awesome. . There is no problem with android firefox/chrome
I am using Android UC browser, you can try it by visiting 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>

Copy after login