Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > Method to define input type=file style_HTML/Xhtml_Web page production

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

WBOY
Release： 2016-05-16 16:41:18
Original
1620 people have browsed it

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:
Method to define input type=file style_HTML/Xhtml_Web page production
Finally left a DEMO: click to view demo



Tip: You can modify part of the code before running
Related labels：
file style
source：php.cn
Previous article：Write your HTML in this way to make your code better compatible_HTML/Xhtml_Webpage Production Next article：[Web Design] Share E-WebTemplates foreign exquisite web page templates (FLASH PSD source file HTML)_HTML/Xhtml_Web page production
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Even after clearing, the value of my file input remains As you can see in the screenshot. I select a file, keep the popup without refreshing the p...
From 2024-04-06 15:44:52
0
1
384
Create a basic PHP login system: a step-by-step guide I have a task to make a login system using php, specifically one that hashes passwords int...
From 2024-04-02 11:54:37
0
1
412
Modify PHP array to escape single quotes I'm uploading a .xlsx file to a website and reading it into an array and then inserting it...
From 2024-04-01 20:35:28
0
1
304
Unable to move upload file to /tmp This is my uploads.php code: <?phpini_set('display_errors',1);error_reporting(E_ALL);$u...
From 2024-04-01 15:28:12
0
1
283
You cannot use the results of a function in other functions I have two functions convertToBase64(file) for converting the file addData(values) for sen...
From 2024-04-01 13:13:20
0
1
379
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template