File input method and change the style of text __ suitable for Firefox, IE and other browsers
2009-10-13
Every finished things to forget, but also to re-check the information the next time a re-write, which is today writing test code, retained, and to their own records, while to others.
Goal:
to input text styles and upload this file into a sentence below the "Upload" to achieve the same functionality upload pictures.
Difficulties
1, the performance of different styles in different browsers.
2, if only the text in such a way click is not.
3, the text on the input is no way to change.
The solution
with Javascript tried a variety of methods will not work, a lot of trouble. Last in line to see a way a person writes, he gave some inspiration, so only two lines of CSS to solve this problem.
If you add text directly on the onclick event to achieve the click input (), then select the file is possible, but such a way that when the form submit becomes ineffective. So, file input must be real clicks will be effective.
So, thought of a way to input text on top, make it transparent, so that when the text point, actually clicked on input, thus achieving the uploaded file.
The first step
I took with CSS input into larger, the text on the back, when this point text, in fact, is the point Input.
The second step
then change my CSS, the extra Input partially hidden on it.
The net effect
then Input inflicted on it a hundred percent transparent.
The complete code is as follows
After the knot
1, the principle is the way to know the principles, you are free to change the text and style, and change the picture, change the buttons are no problem.
2, this approach looks a little soil, but simple, practical, applicable to all my browsers (ie6 / ie7 / firefox) on your computer.
File input method and change the style of text __ suitable for Firefox, IE and other browsers original address is: http://www.zishu.cn/blogview.asp?logID=859
Goal:
to input text styles and upload this file into a sentence below the "Upload" to achieve the same functionality upload pictures.
Difficulties
1, the performance of different styles in different browsers.
2, if only the text in such a way click is not.
3, the text on the input is no way to change.
The solution
with Javascript tried a variety of methods will not work, a lot of trouble. Last in line to see a way a person writes, he gave some inspiration, so only two lines of CSS to solve this problem.
If you add text directly on the onclick event to achieve the click input (), then select the file is possible, but such a way that when the form submit becomes ineffective. So, file input must be real clicks will be effective.
So, thought of a way to input text on top, make it transparent, so that when the text point, actually clicked on input, thus achieving the uploaded file.
The first step
I took with CSS input into larger, the text on the back, when this point text, in fact, is the point Input.
The second step
then change my CSS, the extra Input partially hidden on it.
The net effect
then Input inflicted on it a hundred percent transparent.
The complete code is as follows
- <style>
- #uploadImg{ font-size:12px; overflow:hidden; position:absolute}
- #file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}
- </style>
- <span id="uploadImg">
- <input type="file" id="file" size="1" >
- < A href = "#" > upload pictures </ A > </ span >
After the knot
1, the principle is the way to know the principles, you are free to change the text and style, and change the picture, change the buttons are no problem.
2, this approach looks a little soil, but simple, practical, applicable to all my browsers (ie6 / ie7 / firefox) on your computer.
File input method and change the style of text __ suitable for Firefox, IE and other browsers original address is: http://www.zishu.cn/blogview.asp?logID=859