javascript - Style form, underline input - Stack Overflow

I have this form and I want the placeholder and the input to be underlined. The underline should have the width of the input, as one types the underline grows. With Firefox is an easy thing, just applying:

input { text-decoration: underline; }

even though I am not sure if there is a way to style the line. Anyways, when it es to Chrome, well, not that easy anymore!

I have tried some solutions with jQuery from this thread, but they don't work that good (they would only work proper with a monospaced typography). You can check one of these solutions outmenting the JS in the codepen.

Any suggestions?

I have this form and I want the placeholder and the input to be underlined. The underline should have the width of the input, as one types the underline grows. With Firefox is an easy thing, just applying:

input { text-decoration: underline; }

even though I am not sure if there is a way to style the line. Anyways, when it es to Chrome, well, not that easy anymore!

I have tried some solutions with jQuery from this thread, but they don't work that good (they would only work proper with a monospaced typography). You can check one of these solutions outmenting the JS in the codepen.

Any suggestions?

• javascript
• html
• css

Share Improve this question Follow edited May 23, 2017 at 12:33 CommunityBot 111 silver badge asked Aug 19, 2016 at 15:29 masadeusmasadeus 8722 silver badges1010 bronze badges 1

• Problem is placholder not underlined in Chrome? Cause text is. – skobaljic Commented Aug 19, 2016 at 15:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

try

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

edit :

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

for plete solution and largest support use

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

To style the Chrome placeholder use:

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

I've e up with two different solutions.

The first solution uses jQuery to dynamically resize the input to match that of an hidden <span> element. That way, it you don't have to guess the "average size" of a character or anything like that.

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

See: https://jsfiddle/pz0f5bam/

---

The second solution is more just CSS. I started by setting the input width to 100% so that you don't have to worry about it's width being too small. Then if you add text-decoration: underline; to the input it looks like it is growing.

I also added styling to the placeholder to make it look like it has a minimum size.

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

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

See: https://jsfiddle/vrodL180/

I added a couple of lines to @spencerlarry 's solution so that when the user erases the input the width goes back to the original one. Just leave it here in case someone finds it useful ;)

$("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);
  });