Question

我想使用Tobias Ahlin's script来设置输入框的样式。虽然它完全适用于段落，但输入却没有。此外，:: before不会出现在旁观者中。

这是我的代码：

.edit input {
    text-decoration: none;
    outline: none;
    border: none;
    position: relative;
    font-size: 1.125rem;
}

.edit input::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.15s ease-in-out 0s;
}
.edit input:active::before, .edit input:focus::before {
    visibility: visible;
    transform: scaleX(1);
}

<div class="edit">
  <input type="text" maxlength="15" value="Some content here...">
</div>

我在Angular 5应用程序中使用它，但我认为它现在不相关。

Answer 1

问题是input和其他表单元素不会呈现:before和:after伪元素。

作者用。指定生成内容的样式和位置：before和：after伪元素。正如他们的名字所示，：before和：after伪元素指定内容的位置元素的文档树内容之前和之后。内容' property与这些伪元素一起指定了什么插入

W3 Specs

将input包裹在span中会使其正常工作：

<div class="edit">
  <span><input type="text" maxlength="15" value="Some content here..."></span>
</div>

CSS ...请注意.edit span::before 底部：-2px 与您的代码不同。

span {
  position: relative;
}

.edit input {
    text-decoration: none;
    outline: none;
    border: none;
    position: relative;
    font-size: 1.125rem;
}

.edit span::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -2px;
    left: 0;
    background-color: #000;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.15s ease-in-out 0s;
}
.edit span:hover::before {
    visibility: visible;
    transform: scaleX(1);
}

Answer 2

这是一种方法。

只需使用span标记包装输入元素，然后设置样式。

$(document).ready(function() {
  $(document).on("focus blur", "input", function() {
    $("span").toggleClass("underline");
  });
});

.edit {
  position: relative;
  display: inline-block;
}

.edit input {
  text-decoration: none;
  outline: none;
  border: none;
  font-size: 1.125rem;
}

.edit span::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.15s ease-in-out 0s;
}

.edit span.underline::before,
.edit span.underline::before {
  visibility: visible;
  transform: scaleX(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edit">
  <span>
    <input type="text" maxlength="15" value="Some content here...">
  </span>
</div>

Answer 3

谢谢@ uom-pgregprio的解决方案，这和你的一样，但不需要JS。（对于任何遇到这个问题的人。）

＆＃13;

.edit {
  position: relative;
  display: inline-block;
}

.edit input {
  text-decoration: none;
  outline: none;
  border: none;
  font-size: 1.125rem;
}

.edit span::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  transform: scaleX(0);
  transition: all 0.15s ease-in-out 0s;
}

.edit span:focus-within::before {
  visibility: visible;
  transform: scaleX(1);
}

＆＃13;

<div class="edit">
  <span>
    <input type="text" maxlength="15" value="Some content here...">
  </span>
</div>

＆＃13;

我的自动下划线脚本出了什么问题？

3 个答案: