CSS实现输入框hover变宽、点击后保持宽度的问题求助

一、修复Hover移开的过渡动画 #

你当前的问题是transition属性仅写在:hover伪类中，导致只有鼠标移入时有动画，移出时无过渡效果。将transition放到输入框的基础样式里，就能让状态切换（移入/移出）都触发平滑动画：

input[type=text] {
  border: 10px solid white;
  border-radius: 20px;
  width: 130px;
  /* 把过渡效果放在基础样式，所有状态变化均生效 */
  transition: all 1s;
}

input[type=text]:hover {
  width: 180px;
}

修改后，鼠标移开输入框时，会平滑缩回到原宽度，而非瞬间跳转。

二、点击后保持宽度的实现（两种方案） #

方案1：纯CSS（利用:focus伪类） #

如果需求是输入框获得焦点（点击后）保持宽幅，失去焦点后恢复，直接用:focus配合:not(:focus)的hover逻辑即可，无需JS：

input[type=text] {
  border: 10px solid white;
  border-radius: 20px;
  width: 130px;
  transition: all 1s;
}

/* 仅未获得焦点时，hover触发宽度变化 */
input[type=text]:not(:focus):hover {
  width: 180px;
}

/* 获得焦点时保持宽幅 */
input[type=text]:focus {
  width: 180px;
  outline: none; /* 可选：移除默认焦点边框 */
}

方案2：JavaScript（永久保持宽幅，可手动重置） #

如果需求是点击输入框后永久保持宽幅，即使失去焦点也不恢复，可以通过JS给输入框添加类实现：

<form>
  <label for="fName">First Name</label>
  <br>
  <input type="text" id="fName" name="fName">
  <br><br>
  <label for="lName">Last Name</label>
  <br>
  <input type="text" id="lName" name="lName">
  <br><br>
  <input type="submit" name="submit" value="submit">
</form>

<script>
// 获取所有文本输入框
const inputs = document.querySelectorAll('input[type=text]');

inputs.forEach(input => {
  // 点击输入框时添加宽幅类
  input.addEventListener('click', () => {
    input.classList.add('expanded');
  });
  
  // 可选：点击提交按钮重置宽度
  document.querySelector('input[type=submit]').addEventListener('click', (e) => {
    e.preventDefault(); // 阻止默认提交行为，仅作演示
    inputs.forEach(input => {
      input.classList.remove('expanded');
    });
  });
});
</script>

对应的CSS补充：

/* 添加类后保持宽幅 */
input[type=text].expanded {
  width: 180px;
}

补充说明 #

你尝试的:hover:after和:hover:before伪元素不生效，是因为<input>属于单标签元素，不支持伪元素（伪元素要求元素有闭合标签或可容纳内容），因此这种方法对输入框无效。

内容的提问来源于stack exchange，提问作者ゼーンゝZayn