Style form, underline input

Question

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 comes 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 outcommenting the JS in the codepen.

Any suggestions?

Problem is placholder not underlined in Chrome? Cause text is. — skobaljic, Aug 19 '16 at 15:33

score 3 · Answer 1 · edited Aug 19 '16 at 17:45

3

try

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

edit :

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

for complete 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

edited Aug 19 '16 at 17:45

happymacarts

2,547
1
25
33

answered Aug 19 '16 at 15:35

AJ Riley

196
1
10

But this would still leave me with the problem of styling the input, which actually is the main problem. – masadeus Aug 19 '16 at 15:51
check my post again? – AJ Riley Aug 19 '16 at 15:56
what additional do you want to do with the input? did you try text-decoration: underline; on the input element? – happymacarts Aug 19 '16 at 16:02
i suggested an edit to the answer and added the codepen http://codepen.io/happymacarts/pen/WxWXdK – happymacarts Aug 19 '16 at 16:16
Thanks! But I still went for @spencerlarry 's solutions because it still allows me to style the underline. – masadeus Aug 20 '16 at 10:13

skobaljic · Answer 2 · 2016-08-19T16:24:31.253

2

To style the Chrome placeholder use:

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

edited Aug 19 '16 at 16:24

answered Aug 19 '16 at 15:35

skobaljic

9,379
1
25
51

But this would still leave me with the problem of styling the input, which actually is the main problem. – masadeus Aug 19 '16 at 15:50
What problems man? Just use same style for `input` and `input::-webkit-input-placeholder`. You said you wanted to look as in Firefox, here is your solution. – skobaljic Aug 19 '16 at 16:24

score 1 · Accepted Answer · answered Aug 19 '16 at 16:17

I've come 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("&nbsp;");
    }
      $("#clone").text($('input').val());
    $('input').width($("#clone").width() + 40);
  }, 100);
});

See: https://jsfiddle.net/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.net/vrodL180/

I used the first one at it allows me style the underline. Neat trick!! — masadeus, Aug 20 '16 at 10:07

score 0 · Answer 4 · answered Aug 20 '16 at 10:25

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

Oh and I also found this: https://goodies.pixabay.com/jquery/auto-grow-input/demo.html — masadeus, Aug 20 '16 at 13:34

Style form, underline input

4 Answers4