输入类型文件按钮的样式高度

时间:2011-09-15 17:09:58

标签: css

我正在尝试使用图像设置输入类型文件的样式。到目前为止,这么好,但现在我想在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;
}

2 个答案:

答案 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
}