First look at the following code:
| The code is as follows: | Copy code |
| <Html> <Head> </Head> <Body> <Form name = "form1"> <Input type = 'file' name = 'file1' id = 'file1' style = 'display: none'> <Input id = 'text1' style = 'border: 1 solid black; height: 22'> <Input type = 'Button 'value = 'file' style = 'border: 1 solid orange; background-color: eeeeee; height: 22' Onclick = 'document. all. file1.click (); document. all ("text1"). value = document. all ("file1"). value; '> <Input type = "button" value = "111" onclick = 'document. getElementById ("file1"). click () '> <Input type = "button" value = "111" onclick = 'alert (document. form1.file1. value) '> </Form> </Body> </Html> |
|
This means that the original file domain can also be defined by a script! It is not supported by Firefox.
So I wrote a definition of the style in the form and carefully studied it as follows:
1. form
First, form has a boundary and padding. Remember, or you will not be able to find any problems at the beginning.
2. input
We can define the font color, border, and background color of the button when defining INPUT. It seems that the words are not so vertical in this definition! However, the effect is not affected.
3. inputl Image beautification
When we want to beautify the button, we need to use the background. Remember to define the border as none. Then you can define your favorite image. Define its height and width. ※When writing a value, we must write Chinese characters and then define the style text-indent:-9999px to hide the words, if it is in English, it will be displayed. In IE, it does not exist in Firefox. In other cases, if you do not write the value, in IE, the button is very small, and Firefox does not. You can test it by yourself.
4. File domain
When defining the file field button, I divide this field into two parts: the text Part A and the button B for clarity. We can only define the border A and border B, as well as the background color and text color of Part.
5. Text fields
This button, we can define the width, but the height is invalid. If you want to define a higher value, you can only define a larger font. For example, if the font size is 30 px, the height of the font increases accordingly.
The above is the case where no script is used. Write so much first.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
