如何通过CSS根据输入框值的长度选择元素并调整字体大小

嘿，我来帮你搞定这个需求！首先得明确一个关键点：纯CSS的属性选择器（比如你提到的[att^=str]这类）只能匹配输入框初始写在HTML里的value属性值，没法实时响应用户点击数字键盘后的值变化。所以咱们得结合JavaScript来监听值的变化，再配合CSS调整字体大小，下面给你两种可行的方案：

方案一：JS监听值变化 + CSS类控制（兼容性拉满） #

这是最稳妥的方案，新老浏览器都能完美运行：

1. 保留你的HTML结构，补充数字键盘示例按钮 #

<input readonly="readonly" step="1" value="0" type="number" id="numberInput">
<!-- 假设你的数字键盘是这类按钮，可根据实际逻辑调整 -->
<button class="num-key">1</button>
<button class="num-key">2</button>
<button class="num-key">3</button>
<!-- ... 剩余数字按钮 -->

2. 编写CSS样式：用类对应不同位数的字体大小 #

/* 默认样式（1位数时生效） */
#numberInput {
  font-size: 24px;
  transition: font-size 0.2s ease; /* 加过渡动画让大小变化更丝滑 */
  /* 可补充其他自定义样式，比如边框、内边距等 */
}

/* 两位数时的字体大小 */
#numberInput.two-digit {
  font-size: 20px;
}

/* 三位数及以上时的字体大小 */
#numberInput.three-digit {
  font-size: 16px;
}

3. 用JS监听按钮点击，更新输入框值并切换类 #

const numInput = document.getElementById('numberInput');
const numKeys = document.querySelectorAll('.num-key');

// 给每个数字按钮绑定点击事件
numKeys.forEach(key => {
  key.addEventListener('click', () => {
    // 示例逻辑：点击按钮追加数字（如果你的键盘是替换值，修改此处即可）
    let currentValue = numInput.value === '0' ? '' : numInput.value;
    numInput.value = currentValue + key.textContent;
    // 触发字体大小调整
    adjustFontSize(numInput);
  });
});

// 封装调整字体类的函数
function adjustFontSize(input) {
  const valueLength = input.value.length;
  // 先移除旧类避免冲突
  input.classList.remove('two-digit', 'three-digit');
  // 根据位数添加对应类
  if (valueLength === 2) {
    input.classList.add('two-digit');
  } else if (valueLength >= 3) {
    input.classList.add('three-digit');
  }
}

// 页面初始化时执行一次，处理初始值0的情况
adjustFontSize(numInput);

方案二：用CSS :has() 选择器（仅现代浏览器支持） #

如果只需要兼容Chrome 101+、Firefox 121+这类新浏览器，可以试试更简洁的CSS写法，JS逻辑和方案一完全一致：

#numberInput {
  font-size: 24px;
  transition: font-size 0.2s ease;
}

/* 当输入框带有two-digit类时调整字体 */
body:has(#numberInput.two-digit) #numberInput {
  font-size: 20px;
}

/* 当输入框带有three-digit类时调整字体 */
body:has(#numberInput.three-digit) #numberInput {
  font-size: 16px;
}

小提示 #

• 因为输入框是readonly状态，用户无法手动输入，但JS修改value是完全有效的，所以核心逻辑就是监听按钮点击后的数值更新。
• 如果你的数字键盘逻辑是替换当前值而非追加，只需要修改JS里更新numInput.value的代码即可，adjustFontSize函数可直接复用。
• 过渡动画是可选的，但能让字体大小变化更自然，提升用户体验。

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