How to define input type=file style
|
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
Recommend
Detailed tutorial on replacing mysql8.0.17 in windows10
This article shares the specific steps of replaci...
How to export mysql query results to csv
To export MySQL query results to csv , you usuall...
MySQL Series 14 MySQL High Availability Implementation
1. MHA By monitoring the master node, automatic ...
A practical tutorial on how to quickly insert tens of millions of records into MySQL
1. Create a database 2. Create a table 1. Create ...
How to install php7 + nginx environment under centos6.6
This article describes how to install php7 + ngin...
10 minutes to thoroughly understand WeChat applet single page application routing
Single page application characteristics "Ass...
What knowledge systems do web designers need?
Product designers face complex and large manufactu...
Detailed explanation of MySQL Limit performance optimization and paging data performance optimization
MySQL Limit can query database data in segments a...
JavaScript Html to implement the mobile red envelope rain function page
This article example shares the specific code of ...
Native JS to implement image carousel JS to implement small advertising plug-in
Recently I want to use native JS to implement som...
Practical record of solving MySQL deep paging problem
Table of contents Preface Why does limit deep pag...
XHTML no longer uses some obsolete elements in HTML
When we do CSS web page layout, we all know that i...
jQuery implements breathing carousel
This article shares the specific code of jQuery t...
Detailed explanation of pid and socket in MySQL
Table of contents 1. Introduction to pid-file 2.S...
Detailed explanation of WeChat Mini Program official face verification
The mini program collected user personal informat...