Firefox中Input组件大border-radius导致光标变形问题求助

问题描述 #

给Input组件设置border-radius: 1200px时，Firefox浏览器中光标出现变形；将border-radius改为10px后恢复正常，Chrome无此问题。尝试增加padding可解决但不符合设计要求，需替代方案。

相关代码

CSS部分：

.container {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
}

.input {
  outline: none;
  border: 0.8px solid var(--color-gray4);
  border-radius: 1200px;
  padding: 10px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 14px;
  color: var(--color-gray1);
}

.input_title {
  font-family: var(--font-family);
  font-weight: 300;
  font-size: 12px;
  color: var(--color-gray2);
}

.input:focus {
  border: 1px solid var(--color-primary);
  background: var(--color-primary-light);
}

JSX部分：

<form className={styles.container}>
  <label className={styles.input_title} htmlFor={inputId}>
    {children}
  </label>
  <input className={styles.input} {...props} id={inputId}></input>
</form>

可行解决方案 #

• 方案1：将border-radius设为元素高度的一半
  Firefox对远大于元素高度一半的border-radius渲染逻辑特殊，会引发光标变形。计算元素实际高度（上下padding+字体大小），将border-radius设为高度的一半，既能保持圆润视觉，又规避光标问题：

  .input {
    /* 示例：10px上下padding + 14px字体大小，高度约34px，设为17px */
    border-radius: 17px;
  }
  

• 方案2：用mask-image模拟大圆角
  若必须保留超大圆角视觉，可通过CSS mask实现，不修改input本身的border-radius：

  .input {
    border-radius: 0;
    mask-image: radial-gradient(circle, white 100%, transparent 100%);
    overflow: hidden;
  }
  

  注意mask颜色需与input背景色匹配，确保视觉一致。

• 方案3：外层包裹div实现圆角
  在input外层加一个div，给div设置超大border-radius，input本身用0圆角：

  .input_wrapper {
    border-radius: 1200px;
    overflow: hidden;
    border: 0.8px solid var(--color-gray4);
  }
  
  .input_wrapper:focus-within {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
  }
  
  .input {
    border-radius: 0;
    border: none;
    outline: none;
    padding: 10px;
    /* 其他原有样式保持不变 */
  }
  

  对应JSX调整：

  <form className={styles.container}>
    <label className={styles.input_title} htmlFor={inputId}>
      {children}
    </label>
    <div className={styles.input_wrapper}>
      <input className={styles.input} {...props} id={inputId}></input>
    </div>
  </form>
  

内容的提问来源于stack exchange，提问作者Тимофей