如何防止输入切割字母的尾部而不改变高度？

Question

我正在尝试使用下划线来实现输入字段。因为它在视觉上对我更有吸引力，所以我试图尽可能接近字体下划线。我确实达到了接近度，但是现在，输入字段用尾巴剪切字母的尾部。这有可能的解决方法吗？我可以用“溢出：可见”之类的东西取消输入的这种行为吗？或者我可以在输入字段上绘制一条假线，而不是使用border-bottom？提前谢谢。

简而言之，我正试图让文字通过底线。

以下是有关此问题的屏幕截图。

这是我目前的课程：

.kk_input {
  border: 0;
  border-bottom: 1px solid #000;
  outline: none;
  font-size: 20px;
  height: 20px;
  margin-top: 5px;
}

Answer 1

如果没有看到剩余的标记，这应该会给你一个足够的想法。

.kk_input {
  border: 0;
  outline: none;
  font-size: 20px;
}

div {
  position: relative;
}

div:after {
  position: absolute;
  content: "";
  bottom: 4px;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: black;
}

<div>
  <input class="kk_input" type="text">
</div>

Answer 2

您可以使用多个box-shadow来创建此效果。

＆＃13;

＆＃13;

.so49204829_input{
  line-height: 20px;
  font-size: 20px;
  padding: 8px 4px;
  box-shadow: inset 0 -11px 0 #fff, inset 0 -12px 0 #000;
}

＆＃13;

<input type="text" class="so49204829_input">

＆＃13;

＆＃13;

＆＃13;

＆安培;这是使用第二个元素的另一种方法。遗憾的是，您无法在输入元素中添加:after伪元素（在发布时）。

＆＃13;

＆＃13;

.so49204829_input {
  line-height: 20px;
  font-size: 20px;
  padding: 8px 4px;
  width: 200px;
  display:block;
}

.so49204829_input_accent {
  margin-top: -14px;
  height: 1px;
  width: 208px;
  background-color: #000;
  pointer-events: none; /* this makes sure click events aren't intercepted by the accent-line element */
}

＆＃13;

<input type="text" class="so49204829_input"><div class="so49204829_input_accent"></div>

＆＃13;

＆＃13;

＆＃13;