Method to define input type=file style_HTML/Xhtml_Web page production

Why beautify the file control? Just imagine, the other children are all neatly dressed and beautiful, but two of them don't look down on you. It's so disharmonious.

The original file control is like this:

Don’t think that this is composed of a text and a button, it is a control , the html code is:

Copy the code

The code is as follows:

In this case We use a text and a button to display the style of this file. The html code is as follows:

Copy code

Code As follows:

div>

The outer layer of div is to provide a position reference for the input inside, because it needs to be relatively positioned when writing styles, so that the real file control covers the simulated one, and then hides the file control (even if the file control is not visible), so the css code is like this:

Copy the code

The code is as follows:

.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background- color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0 );opacity: 0;width:260px }

Rendering:

Finally left a DEMO: click to view demo

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Define the style of input type="file"</title> <style type="text/css"> body{font-size:14px;} input{ vertical-align:middle; margin:0; padding:0} .file-box{ position:relative;width:340px} .txt{ height:22px; border:1px solid #cdcdcd; width:180px;} .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;} .file{ position:absolute; top:0; right:80px; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px } </style> <div class="file-box"> <form action="" method="post" enctype="multipart/form-data"> <input type="text" name="textfield" id="textfield" class="txt"> <input type="button" class="btn" value="Browse..."> <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value"> <input type="submit" name="submit" class="btn" value="Upload"> </form> </div>

Tip: You can modify part of the code before running