Customizing input type = ”file” with CSS
There are several ways to customize (change the appearance) of inputs of this type. All of them have their own advantages and disadvantages, but, in my opinion, the option I have proposed wins even with their disadvantages, of which only one.
These very alternative methods are substitution via JavaScript, this is a flash downloader, or href = mailto =)
The pros and cons of each of them, I think, are quite obvious and understandable. The most common option with flash loader, JavaScript'e perverted much less. Styles do it, according to my observations, in general units.
The variant with styles has one big (and is it great for all sites and options for placing such an input?!) A minus, which I occasionally don’t pay attention to - is the inability to see the name of the file specified in this input, and consequence, the inability to insert the address of the file copy-paste, which is sometimes very convenient.
')
Okay, enough talk - let's get started. Immediately, I note that the dimensions will need to be checked in each individual case, otherwise there may be unpleasant moments in IE.
An example can be found on this page - absolvo.ru/tmp/17
What does this code do? I will explain in steps:
1. Create a layer, specify the required size;
2. Prepare a picture, put it in the background to the layer;
3. Specify a large font size for input, for example 199px;
4. Specify the input negative margin
5. Display transparency to zero;
6. We make all this beautiful title;
By the way, my colleague scratched his brain, and came up with a similar perversion, but in a slightly different perspective - I suggest reading on the page of his blog (it doesn't work in Opera9 (I missed, but dimarf noticed), but everything is fine in Opera10). Maybe you have an idea how to optimize or reduce the code? If there is - feel free to share! :)
It remains to check this method on mobiles - who has an iPhone - can a screen-shot in the studio?
These very alternative methods are substitution via JavaScript, this is a flash downloader, or href = mailto =)
The pros and cons of each of them, I think, are quite obvious and understandable. The most common option with flash loader, JavaScript'e perverted much less. Styles do it, according to my observations, in general units.
The variant with styles has one big (and is it great for all sites and options for placing such an input?!) A minus, which I occasionally don’t pay attention to - is the inability to see the name of the file specified in this input, and consequence, the inability to insert the address of the file copy-paste, which is sometimes very convenient.
')
Okay, enough talk - let's get started. Immediately, I note that the dimensions will need to be checked in each individual case, otherwise there may be unpleasant moments in IE.
An example can be found on this page - absolvo.ru/tmp/17
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<style>
div {
overflow: hidden;
width: 95px;
height: 37px;
cursor: pointer;
background: url (input-file.gif) no-repeat;
}
input {
opacity: 0;
filter: alpha (opacity: 0);
font-size: 199px;
cursor: pointer;
padding: 0px;
margin: 0px;
border: none;
margin-left: -450px;
}
</ style>
</ head>
<body>
<div title = "Click on me to browse the file">
<input type = "file" size = "1" />
</ div>
</ body>
</ html> What does this code do? I will explain in steps:
1. Create a layer, specify the required size;
2. Prepare a picture, put it in the background to the layer;
3. Specify a large font size for input, for example 199px;
4. Specify the input negative margin
5. Display transparency to zero;
6. We make all this beautiful title;
By the way, my colleague scratched his brain, and came up with a similar perversion, but in a slightly different perspective - I suggest reading on the page of his blog (it doesn't work in Opera9 (I missed, but dimarf noticed), but everything is fine in Opera10). Maybe you have an idea how to optimize or reduce the code? If there is - feel free to share! :)
It remains to check this method on mobiles - who has an iPhone - can a screen-shot in the studio?
Source: https://habr.com/ru/post/56944/
All Articles