How to size input after text amount

Question

How can i make my input box length relative to the amount of text in it?

<div class="kontakt">
                <h2>Kontakt oss</h2>
                <p>Hei! Jeg heter <input type="text" name="navn" placeholder="navn">, og jeg lurer på følgende:</p>

CSS:

.kontakt {
margin-top: 4%;
font-size: 80%;
text-align: center;
}
.kontakt input{
    border:none;
    border-bottom: 1px solid black;
    background:none;
    color:white;
    opacity: 0.7;
    text-align: center;
    size: relative;
}

Possible duplicate of http://stackoverflow.com/questions/3392493/adjust-width-of-input-field-to-its-input — Sanket Makani, Nov 06 '16 at 12:40
Did some searching, and couldn't find anything, but it is what i was looking for, so thank you! — malik aasen, Nov 06 '16 at 13:42

score 0 · Answer 1 · edited Nov 06 '16 at 16:51

this will help you:

adjustable text area

$('input[type="text"]').keypress(function(e) {
    if (e.which !== 0 && e.charCode !== 0) { // only characters
        var c = String.fromCharCode(e.keyCode|e.charCode);
        $span = $(this).siblings('span').first();
        $span.text($(this).val() + c) ; // the hidden span takes 
                                        // the value of the input
        $inputSize = $span.width() ; 
        $(this).css("width", $inputSize) ; // apply width of the span to the input
     }
}) ;

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

You can try this:-

style='width:20em'

link:-Input size vs width

edited May 23 '17 at 12:33

Community

1
1

answered Nov 06 '16 at 16:55

Razia sultana

2,168
3
15
20

How to size input after text amount

2 Answers2