Home/ Questions/Q 6585751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:42:12+00:00

I’m trying to style an input type file with an image. so far, so

  • 0

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: 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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0