About input file control and beautification

About input file control and beautification

When uploading on some websites, after clicking the "Browse" button, the [Select File] dialog box will pop up. To achieve this function, just use the input file control~

XML/HTML CodeCopy content to clipboard
  1. <!doctype html >     
  2. < html   lang = "en" >     
  3. < head >     
  4.    < meta   charset = "UTF-8" >     
  5.    < title > Document </ title >     
  6.    < style > </ style >     
  7. </ head >     
  8. < body >     
  9. 　　< input   type = "file"   value = "Select file"   />     
  10. </ body >     
  11. </ html >     

The effect picture is like this:

Notice! Don't think this is composed of a text and a button, it is actually a file control.

Today, I encountered a requirement at work: do not display "No file selected". After tinkering with it for an hour, I found that setting its width value solved it:

Code: <input type="file" value="Select file" />

The width value is set to 70px, as shown below:

【beautify】

Ideas:

The outer div is to provide a position reference for the input inside, because relative positioning is required 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)

XML/HTML CodeCopy content to clipboard
  1. <!doctype html >   
  2. < html   lang = "en" >   
  3. < head >   
  4.    < meta   charset = "UTF-8" >   
  5.    < title > Document </ title >   
  6.    < style >   
  7. .file-box{ position:relative;width:340px}
  8. .txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
  9. .btn{ background-color:#FFF; border:1px solid #CDCDCD; height:24px; width:70px;}
  10. .file{ position:absolute; top:0; right:80px; height:24px; opacity:0;width:260px; }
  11.    </ style >   
  12. </ head >   
  13. < body >   
  14.      < br > < br >   
  15.      < div   class = "file-box" >     
  16.          < form   action = ""   method = "post"   enctype = "multipart/form-data" >     
  17.          < input   type = 'text'   name = 'textfield'   id = 'textfield'   class = 'txt'   />     
  18.          < input   type = 'button'   class = 'btn'   value = 'browse'   />     
  19.          < input   type = "file"   name = "fileField"   class = "file"   id = "fileField"   size = "28" />     
  20.      </ form >     
  21.      </ div >     
  22. </ body >   
  23. </ html >   

Effect:

The above article about input file controls and beautification is all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

<<:  JavaScript data transmission between different pages (URL parameter acquisition)

>>:  Example of implementing QR code scanning effects with CSS3

Recommend

Detailed tutorial on how to modify the root password after forgetting it in MySQL 5.7

Preface For a long time, the application and lear...

Install Linux rhel7.3 operating system on virtual machine (specific steps)

Install virtualization software Before installing...

Detailed explanation of transaction isolation levels in MySql study notes

background When we talk about transactions, every...

Simply understand the differences in the principles of common SQL delete statements

This article mainly introduces the differences be...

What hidden attributes in the form can be submitted with the form

The form elements with visibility=hidden and displ...

MySql cache query principle and cache monitoring and index monitoring introduction

Query Cache 1. Query Cache Operation Principle Be...

Basic operation tutorial of files and permissions in centos

Preface Before we begin, we should briefly unders...

Detailed explanation of Javascript closures and applications

Table of contents Preface 1. What is a closure? 1...

HTML Marquee character fragment scrolling

The following are its properties: direction Set th...

CSS controls the spacing between words through the letter-spacing property

letter-spacing property : Increase or decrease th...

Detailed explanation of common usage of pseudo-classes before and after in CSS3

The before/after pseudo-class is equivalent to in...

Learn the common methods and techniques in JS arrays and become a master

Table of contents splice() Method join() Method r...

How to use mixins in Vue

Table of contents Preface How to use Summarize Pr...

How does Vue3's dynamic components work?

Table of contents 1. Component Registration 1.1 G...

A brief discussion on an efficient algorithm for constructing tree structures in JavaScript

Table of contents introduction Ideas Establish ID...