Question

我想使输入的高度与字体大小相同。在这种情况下，我希望输入字体大小为16px的输入时其自身的高度为16px。考虑到没有什么可以让我以为不可能。

您将在下面的代码中看到。我基本上已经尝试了所有可以尝试改写的样式。这包括内联和外部样式！在所有内容上都很重要，例如，更具体的样式是“ padding-bottom”而不是“ padding”，包括CSS选择器，它们不选择我的元素而是应用它们。最重要的是，输入高度的3px似乎不是来自样式。

input, input:matches([type="password"], [type="search"]) {
  border: none; 
  padding-top: none !important; 
  padding-bottom: none !important;
  padding-left: none !important; 
  padding-right: none !important; 
  margin: none !important; 
  outline: none; 
  box-sizing: border-box; 
  font-size: 16px; 
  -webkit-appearance: none; 
  font-weight: normal;
}

<!DOCTYPE html>
<html>
<body>

<input type="text" oninput="myFunction()" style="border: none; padding-top: none !important; padding-bottom: none !important; padding-left: none !important; padding-right: none !important; margin: none !important; outline: none; box-sizing: border-box; font-size: 16px; -webkit-appearance: none; font-weight: normal;">

</body>
</html>

在此处查找与上面相同的代码：https://codepen.io/AlexStiles/pen/vYBgpGX

这是Safari的网络检查人员认为的问题（Chrome和Firefox中也存在此问题）。样式似乎无效。请注意，用户代理正在应用一些填充，并且高度为20px而不是16px。我不知道那额外的3px来自哪里。

注意：我不想为输入设置高度，我希望高度由字体大小决定。

Answer 1

err ...您设置了错误的值

所有正确的语法

/* <length> values */
padding-*: 0.5em;
padding-*: 0;
padding-*: 2cm;
/* <percentage> value */
padding-*: 10%;
/* Global values */
padding-*: inherit;
padding-*: initial;
padding-*: unset;

https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom

可能您需要设置此权限吗？

  padding-top: 0 !important; 
  padding-bottom: 0 !important;
  padding-left: 0 !important; 
  padding-right: 0 !important;
  margin: 0 !important;

如果您需要将行高修剪为与文本大小相同的大小

line-height: 16px;

警告可以切出一些字符

为什么我不能覆盖输入中用户样式代理的填充？

1 个答案: