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
How to use Baidu Map API in vue project
Table of contents 1. Register an account on Baidu...
JavaScript to achieve click image flip effect
I was recently working on a project about face co...
JavaScript's unreliable undefined
undefined In JavaScript, if we want to determine ...
The implementation of Youda's new petite-vue
Table of contents Preface Introduction Live Easy ...
Non-standard implementation code for MySQL UPDATE statement
Today I will introduce to you a difference betwee...
WeChat applet realizes chat room function
This article shares the specific code of WeChat a...
How to configure mysql on ubuntu server and implement remote connection
Server: Ubuntu Server 16.04 LSS Client: Ubuntu 16...
How to use the MySQL authorization command grant
The examples in this article run on MySQL 5.0 and...
In-depth understanding of Vue's plug-in mechanism and installation details
Preface: When we use Vue, we often use and write ...
Sample code for separating the front-end and back-end using FastApi+Vue+LayUI
Table of contents Preface Project Design rear end...
How to make a div height adaptive to the browser height
This old question has troubled countless front-end...
Img semi-transparent processing Img plus semi-transparent background implementation ideas and code
Copy code The code is as follows: <!DOCTYPE ht...
Introducing multiple custom fonts in CSS3
Today I found a problem in HTML. There are many d...
How to use HTML 5 drag and drop API in Vue
The Drag and Drop API adds draggable elements to ...
Analysis of MySQL data backup and recovery implementation methods
This article uses examples to describe how to bac...