我正在尝试使用图像设置输入类型文件的样式。到目前为止,这么好,但现在我想在40px上设置该按钮的高度。问题是,不知何故,这个按钮有一个固定的高度,即使我把!重要放在大小的40px旁边,按钮仍然显示原始高度。有人可以帮我这个吗?谢谢 这是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>
和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: 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;
}
答案 0 :(得分:0)
我想出来了。由于input type="file"
和input type="button"
不允许我更改高度,因此更改此行:<input type="button" value="" class="file_input_button" />
对此:<a href="#" class="file_input_button" />
并将css更改为:
.file_input_div
{
position: relative;
width: 100px;
height: 38px;
overflow: hidden;
}
谢谢你,无论如何。
答案 1 :(得分:0)
正确的css语法然而,无论它是否允许你设置高度(我不知道)。 是:
input[type=file] {
//your style rules
}