HTMLボタンを増やすボタンサイズを変更しないでフォントサイズを変更する

Question

私はこれを理解することができませんでしたので、私はコミュニティに助けを求めています。前もって感謝します。問題は、ボタンのフォントのサイズを変更すると、ボタンのサイズが変更されることです。現在、ボタンを特定のサイズに保ちたいと思います。だから、私は特定のサイズに私のボタンを修正しましたが、今はフォントサイズを変更することはできません。現在Chromeでプログラムを実行しています。ここで

は、HTMLの塊です：

<div class="file-input-wrapper"> 
    <button class="btn-file-input">Upload Documents</button> 
    <input type="file" name="filesToUpload[]" id="filesToUpload" multiple="" onChange="makeFileList();" /> 
</div> 
<p> 
    <strong>Files You Selected:</strong> 
    <ul id="fileList"> 
    <li>No Files Selected</li> 
    </ul> 
    <div class="file-input-wrapper1"> 
    <button class="btn-file-input1">Upload Documents</button> 
    <input type="submit" value="Upload!" /> 
    </div> 
</p> 

<style type="text/css"> 
    .file-input-wrapper { 
    width: 400px; 
    height: 125px; 
    overflow: hidden; 
    position: relative; 
    } 

    .file-input-wrapper>input[type="file"] { 
    font-size: 200px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    opacity: 0; 
    } 

    .file-input-wrapper>.btn-file-input { 
    display: inline-block; 
    width: 400px; 
    height: 125px; 
    } 

    .file-input-wrapper:hover>.btn-file-input { 
    background-color: #aaa; 
    } 

    .file-input-wrapper1 { 
    width: 400px; 
    height: 125px; 
    overflow: hidden; 
    position: relative; 
    } 

    .file-input-wrapper1>input[type="submit"] { 
    font-size: 200px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    opacity: 0; 
    } 

    .file-input-wrapper1>.btn-file-input1 { 
    display: inline-block; 
    width: 400px; 
    height: 125px; 
    } 

    .file-input-wrapper1:hover>.btn-file-input1 { 
    background-color: #ffff00; 
    } 
</style> 

Answer 1

あなたは、次のとボタンのフォントサイズを設定することができます。

button { 
    font-size: 40px; 
} 

あなたのボタンが定義された高さと幅を持っているので、それは彼らを変更すべきではありません寸法。

Answer 2

すべてのボタンにクラスを追加します。実際にボタンではなく、代わりにtype = "submit"またはinput type = "button"を入力しても、これらのすべてにこのクラスを追加してください。 次に、あなたのCSSでこれを行う：あなたはすでにクラスを持っているボタンを使用している場合

.some_class_added_to_all_buttons{ 
    width: some-width; 
    height: some-height; 
    font-size: some-font-size; 

} 

は、トリックをしたこの

<button class="btn-file-input1 additional_class">Upload Documents</button>