如何使用CSS增大HTML按钮字体 及实现点击弹出定义文本框功能

按钮字体大小不生效的解决方法 #

问题原因 #

你写的font-size: 60;没有加长度单位，CSS中除了0值之外，所有长度属性都必须明确指定单位（常用单位有px、rem、em等），浏览器无法识别无单位的非0长度值，所以会回退到默认字体大小。另外你代码里的size: 300px不是合法的CSS属性，要控制按钮尺寸请用width和height属性。

修正后的代码 #

.btn{
    background-color: transparent; /* 等价于rgba(252,252,252,0)，写法更简洁 */
    border: none;
    color: rgb(0,164,224);
    font-weight: 800;
    font-size: 60px; /* 补充px单位，可按需调整数值 */
    width: 80px; /* 按需调整按钮宽高 */
    height: 80px;
    -webkit-text-stroke: 2px black;
    cursor: pointer; /* 增加鼠标悬浮手型优化交互体验 */
}

建议同步修改按钮id，避免特殊字符引发后续JS选择元素的兼容性问题：

<button class="btn" id="questionBtn">?</button>

点击按钮弹出自定义文本框的实现思路 #

实现逻辑非常简单，步骤如下：

• 先写好弹窗的HTML结构和CSS样式，默认设置为隐藏状态（display: none）
• 用JS获取按钮和弹窗的DOM元素
• 给按钮绑定点击事件，点击时修改弹窗的显示状态为可见
• 可额外添加关闭按钮、点击弹窗外部关闭弹窗的逻辑优化体验

完整实现代码示例 #

<!-- 新增弹窗结构 -->
<div class="popup" id="infoPopup">
  <div class="popup-content">
    <p>这里是你要展示的自定义内容</p>
    <button id="closeBtn">关闭</button>
  </div>
</div>

/* 新增弹窗样式 */
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
}
.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 300px;
}

// 交互逻辑代码
const questionBtn = document.getElementById('questionBtn');
const infoPopup = document.getElementById('infoPopup');
const closeBtn = document.getElementById('closeBtn');

// 点击按钮打开弹窗
questionBtn.addEventListener('click', () => {
  infoPopup.style.display = 'block';
});

// 点击关闭按钮关闭弹窗
closeBtn.addEventListener('click', () => {
  infoPopup.style.display = 'none';
});

// 点击弹窗外部区域关闭弹窗
window.addEventListener('click', (e) => {
  if(e.target === infoPopup) {
    infoPopup.style.display = 'none';
  }
});

内容的提问来源于stack exchange，提问作者user17432629