如何用CSS消除输入框内文本的倾斜效果

方法一：反向倾斜抵消（直接修正） #

如果父容器用了transform: skewX(Ndeg)，输入框需要设置反向的倾斜值来抵消，而不是skewX(0deg)——因为父元素的倾斜是作用在整个元素及其子元素的坐标系上，0度等于没抵消，必须用负的对应值：

• 假设父div样式：

.skew-container {
  transform: skewX(10deg);
}

• 输入框的修正样式：

.skew-container input {
  transform: skewX(-10deg);
  /* 可选：若出现布局偏移，可调整变换原点 */
  /* transform-origin: left center; */
}

要是之前设置没生效，检查两点：

1. 选择器权重是否足够（比如用父类+input的组合选择器，比单独input优先级高）
2. 有没有其他transform属性覆盖（比如同时设置了translate，需合并成transform: skewX(-10deg) translate(...)）

方法二：用伪元素实现倾斜（更优雅的方案） #

如果不想让内部元素受任何倾斜影响，可以把倾斜效果放到父容器的伪元素上，让伪元素作为装饰层，内部元素保持正常坐标系：

.skew-container {
  position: relative;
  /* 避免伪元素溢出容器 */
  overflow: hidden;
}
.skew-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff; /* 替换成你的容器背景色 */
  transform: skewX(10deg);
  z-index: -1; /* 将伪元素置于内容下方 */
}
/* 输入框无需任何倾斜修正，正常写样式即可 */
.skew-container input {
  padding: 8px;
  border: 1px solid #ddd;
}

这种方法的好处是内部所有元素都不需要额外修正，完全不受倾斜影响，适合容器内有多个需要保持正常的元素（比如输入框、按钮、文本段落）的场景。

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