风格形式，下划线输入

Question

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

input { text-decoration: underline; }

即使我不知道是否有一种方法可以样式行。无论如何，当涉及到Chrome时，好吧，不再那么容易了！

我试过一些解决方案，使用jQuery从this thread，但他们不工作（他们只适用于等宽字体排版）。您可以检查其中一种解决方案，即在codepen中注释JS。

有什么建议吗？

Answer 1

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

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

$("body").keydown(function(e){ 
    setTimeout(function(){ 
    if(e.which == 32){ 
     $("#clone").append(" "); 
    } 
     $("#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 2

样式的镀铬占位符使用：

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

Answer 3

尝试

::-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 4

我添加几行，从而当用户擦除输入的宽度返回到原来的一个@spencerlarry的溶液。如果有人发现它有用，请将其留在此处;）

$("body").keydown(function(e){ 
    setTimeout(function(){ 
     if(e.which == 32){ 
     $("#clone").append(" "); 
     } 
     $("#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); 
    });