Question

我有this form，我希望占位符和输入加下划线。下划线应该具有输入的宽度，因为下划线增长的一种类型。使用Firefox是一件容易的事情，只需应用：

input { text-decoration: underline; }

即使我不确定是否有办法设计线条。无论如何，谈到Chrome，好吧，不再那么容易了！

我已经尝试了一些来自this thread的jQuery的解决方案，但它们没有那么好用（它们只适用于等宽字体排版）。您可以在codepen中检查其中一个解决JS的解决方案。

有什么建议吗？

Answer 1

要设置Chrome占位符的样式：

input,
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    text-decoration: underline;
}

Answer 2

试

::-webkit-input-placeholder {
    text-decoration: underline;
}

编辑：

 input:not([type=submit]):not([type=file]) {
   text-decoration: underline;
}

完整解决方案和最大支持使用

    ::-webkit-input-placeholder {
  text-decoration: underline;
}

:-moz-placeholder { /* Firefox 18- */
   text-decoration: underline;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-decoration: underline; 
}

:-ms-input-placeholder {  
   text-decoration: underline; 
}

codepen

Answer 3

我提出了两种不同的解决方案。

第一个解决方案使用jQuery动态调整输入大小以匹配隐藏的<span>元素。这样，您就不必猜测角色的“平均大小”或类似的东西。

$("body").keydown(function(e){
  setTimeout(function(){
    if(e.which == 32){
        $("#clone").append("&nbsp;");
    }
      $("#clone").text($('input').val());
    $('input').width($("#clone").width() + 40);
  }, 100);
});

请参阅：https://jsfiddle.net/pz0f5bam/

第二个解决方案更像是CSS。我首先将输入宽度设置为100％，这样您就不必担心它的宽度太小。然后，如果您将text-decoration: underline;添加到输入中，它看起来正在增长。

我还在占位符中添加了样式，使其看起来像是最小尺寸。

input{
  width: 100%;
  font-size: 40px;
  text-decoration: underline;
  background-color: transparent;
  outline: none;
  border: none;
}

::-webkit-input-placeholder {
    text-decoration: underline;
    color: black;
}

请参阅：https://jsfiddle.net/vrodL180/

Answer 4

我在@spencerlarry的解决方案中添加了几行，以便当用户删除输入时，宽度将恢复为原始宽度。只要留下它以防万一有人发现它有用;）

$("body").keydown(function(e){
    setTimeout(function(){
      if(e.which == 32){
        $("#clone").append("&nbsp;");
      }
      $("#clone").text($('input').val());
      $('input').width($("#clone").width());
      // if user erases email go back to original width
      if($("#clone").width() == 0) {
        $('input').width(310);
      }
    }, 100);
  });

样式表格，下划线输入

4 个答案: