Why beautify the file control? Just imagine that all the other children are dressed neatly and beautifully, but two of them ignore you. It is so discordant. The original file control looks like this: Don't think this is composed of a text and a button. It is a control . The HTML code is: Copy code The code is as follows:<input type="file" name="file" /> 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 The code is as follows:<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> The outer div is to provide a position reference for the input inside, because relative positioning is required when writing the style, so that the real file control covers the simulated one, and then hides the file control (even if the file control is invisible), so the CSS code is as follows: Copy 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 } Effect picture: Tip: You can modify some of the code before running |
<<: Interpreting MySQL client and server protocols
>>: Using CSS to implement image frame animation and curve motion
There are two ways to deploy Angular projects wit...
Typical layout examples As shown in the above pic...
This article shares the specific code for impleme...
Table of contents Preface What is metadata Refere...
Anyone who has used Windows Remote Desktop to con...
1. Download the ElasticSearch 6.4.1 installation ...
Table of contents 1. Date 2. RegExp 3. Original p...
This article example shares the specific code of ...
We often encounter this problem: how to use CSS t...
Preface This article mainly explains how to imple...
WeChat Mini Programs are becoming more and more p...
MySQL 5.7.18 free installation version installati...
1. Type introduction 1.1 Domain-based virtual hos...
Several Differences Between MySQL 5.x and MySQL 8...
Perhaps when I name this article like this, someon...