在不更改按钮大小的情况下增加HTML按钮字体大小

问题描述

我无法弄清楚这一点，因此我正在向社区寻求帮助.提前致谢.我遇到的问题是，当我更改按钮中字体的大小时，按钮会重新调整大小.到目前为止，我想将按钮保持在一个特定的大小.因此，我已经将按钮固定为特定大小，但是现在我无法更改字体大小.我目前正在Chrome上运行我的程序.

I have not been able to figure this out, so I am turning to the community for help. Thanks in advance. Issue I am having is that when I change the size of the font in my button, the button then resizes. As of now, I would like to keep the buttons at one specific size. So, I have fixed my buttons to a specific size but now I cannot change the font size. I am currently running my program on 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>

推荐答案

您可以使用以下设置按钮字体大小:

You can set the button font size with the following:

button {
  font-size: 40px;
}

由于按钮具有定义的高度和宽度，因此不应更改其尺寸.

Since your buttons have a defined height and width, it should not change their dimensions.

这篇关于在不更改按钮大小的情况下增加HTML按钮字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！