入力タイプのファイルのスタイリングの高さ

入力タイプのファイルに画像をスタイル設定しようとしています。今のところ良いですが、今ではそのボタンの高さを40ピクセルに設定したいと考えています。問題は、どういうわけか、このボタンは固定された高さを持っていて、大きさの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; 
}

出典

2011-09-15 Eva Dias

あなたが私たちにCSSとHTML –

を示している場合は、[スタイリング入力のhttp://jsfiddle.net/ –

が重複する可能性を使用して、あなたのコードのサンプルを共有できるお手伝いをする方が簡単かもしれませんタイプ=期待どおりに動作していないファイル]（http://stackoverflow.com/questions/4664220/styling-input-type-file-not-working-as-expected）実際には重複のトン –

は私を考え出しました。これに<input type="button" value="" class="file_input_button" /> ：input type="file"とinput type="button"は私が高さを変更できないので、私はこの行を変更<a href="#" class="file_input_button" />をしてCSSを変更：

.file_input_div 
{ 
    position: relative; 
    width: 100px; 
    height: 38px; 
    overflow: hidden; 
}

とにかく、ありがとうございました。

出典

2011-09-16 08:39:54

しかし、正しいCSS構文は、高さのスタイルを設定するかどうかは関係ありません（わかりません）。です：

input[type=file] { 
    //your style rules 
}

出典

2014-03-26 11:32:43 YVbakker

入力タイプのファイルのスタイリングの高さ

答えて

関連する問題