風格形式，下劃線輸入

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); 
    });