styling height of an input type file button
I'm trying to style an input type file with an image. so far, so good, but now I want to set the height of that button on 40px. The problem is that, somehow, this button has a fixed height and even when i put !important next to the 40px of the size, the button still shows the original height. can somebody help me with this? thank you here it is the html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="main.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input type="button" value="" class="file_input_button" />
<input type="file" class="file_input_hidden" onchange="javascript: document.getElementById('fileName').value = this.value" />
</div>
and the css:
.file_input_textbox
{
float: left;
background: none repeat scroll 0 0 #FF554B;
border: medium none;
color: #FFFEFA;
font-family: 'InterstateBold';
font-size: 11px;
margin: 0;
padding:开发者_Go百科 12px 15px;
width: 647px;
}
.file_input_div
{
position: relative;
width: 100px;
height: 23px;
overflow: hidden;
}
.file_input_button
{
position: absolute;
top: 0px;
background:url(btn-newsletter.jpg) no-repeat;
color: #FFFFFF;
border-style: none;
width:40px;
height:40px !important;
}
.file_input_button:hover
{
background:url(btn-newsletter2.jpg) no-repeat !important;
}
.file_input_hidden
{
font-size: 45px;
position: absolute;
right: 0px;
top: 0px;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0;
}
I figured i out. As an input type="file" and input type="button" don't let me change the height, i change this line: <input type="button" value="" class="file_input_button" />
to this: <a href="#" class="file_input_button" /> and change the css to:
.file_input_div
{
position: relative;
width: 100px;
height: 38px;
overflow: hidden;
}
thank you, anyway.
The correct css syntax however, no matter if it lets you style the height or not (I don't know). Is:
input[type=file] {
//your style rules
}
加载中,请稍侯......
精彩评论