css input[type=file] style beautification (input upload file style)
![css input[type=file] style beautification (input upload file style)](/upload/images/67cacb9e46867.webp)
|
Effect:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/*Style 1*/
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter:alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
/*Style 2*/
.file {
position: relative;
display: inline-block;
background: #D0EEFF;
border: 1px solid #99D3F5;
border-radius: 4px;
padding: 4px 12px;
overflow: hidden;
color: #1E88C7;
text-decoration: none;
text-indent: 0;
line-height: 20px;
}
.file input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
}
.file:hover {
background: #AADFFD;
border-color: #78C3F3;
color: #004974;
text-decoration: none;
}
</style>
</head>
<body style="padding: 10px">
<a href="javascript:;" class="a-upload">
<input type="file" name="" id="">Click here to upload a file</a>
<a href="javascript:;" class="file">Select file<input type="file" name="" id="">
</a>
</body>
</html>Summarize The above is the css input[type=file] style beautification (input upload file style) introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Some points on using standard HTML codes in web page creation
>>: Comprehensive analysis of optimistic locking, pessimistic locking and MVCC in MySQL
Recommend
Installing Docker Desktop reports an error message: WSL 2 installation is incomplete (Solve the error message)
Error description When we install Docker Desktop,...
Docker configuration Alibaba Cloud image acceleration pull implementation
Today I used docker to pull the image, but the sp...
Introduction to setting up Tomcat to start automatically on Linux system
1. Enter the /etc/init.d directory: cd /etc/init....
Detailed explanation of how to cleanly uninstall Docker
First, the server environment information: Reason...
Example analysis of the impact of MySQL index on sorting
This article uses examples to illustrate the impa...
VUE implements token login verification
This article example shares the specific code of ...
Solution to the Multiple primary key defined error in MySQL
There are two ways to create a primary key: creat...
Vue implements file upload and download functions
This article example shares the specific code of ...
In-depth explanation of iterators in ECMAScript
Table of contents Preface Earlier iterations Iter...
Detailed explanation of jQuery chain calls
Table of contents Chain calls A small case Chain ...
How to use DCL to manage users and control permissions in MySQL
DCL (Data Control Language): Data control languag...
Implementation of react routing guard (routing interception)
React is different from Vue. It implements route ...
Detailed explanation of some commonly used font-size font units and line-height in CSS
px(pixel) I believe everyone is familiar with the...
How to implement responsive layout in vue-cli
When we are doing front-end development, we will ...
Four categories of CSS selectors: basic, combination, attribute, pseudo-class
What is a selector? The role of the selector is t...