In form creation, the style of input, textarea, And button is easy to define, and the style of select and input file is difficult to define.
The default format of the input file:
We can change the default system appearance by defining the border of input at most:
To make the browser button more beautiful, we want to define its background color, or even use a background image instead. It is really impossible to define the input flie through CSS. See an article by chanceArticle:Input file selection box beautificationThe author sets the default buttons of the system.TransparencyIf the value is 0, define a label style to overwrite the transparent button.
According to the author's method, I also tried it,CodeAs follows:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> alternative approach to input file </title>
<Style type = "text/CSS">
<! --
* {Font-size: 12px}
Body {margin: 0}
. Line {position: relative; float: Left; padding: 8px 0}
. Line span {float: Left}
Input {border: 1px solid #888; Vertical-align: middle}
. File {position: absolute; left: 90px; top: 8px; display: none; filter: alpha (opacity = 0); opacity: 0}
. File1 {padding: 2px 10px; display: block; float: Left; Background: # ff66cc; color: # FFF; Z-index: 1; margin-left: 5px; vertical-align: middle; cursor: pointer}
. Inputstyle {width: 150px; Border: 1px solid #888; Z-index: 99}
-->
</Style>
</Head>
<Body>
<Div class = "line"> <span>
<Label> Upload File: </label>
<Input name = "" type = "text" id = "viewfile" onmouseout = "document. getelementbyid ('upload '). style. display = 'none'; "class =" inputstyle "/>
</Span>
<Label for = "Unload" onmouseover = "document. getelementbyid ('upload '). style. display = 'block'; "class =" file1 "> browse... </label>
<Input type = "file" onchange = "document. getelementbyid ('viewfile '). value = This. value; this. style. display = 'none'; "class =" file "id =" Upload "/>
</Div>
</Body>
</Html>
Effect:Although many labels are added, this method of stealing beams and column replacement is worth studying. Whether there are better and more scientific practices remains to be explored.
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
