CSS Ajustar input consoante o texto inserido

[Joel Martins]

Boas,

Estou tentando fazer com que o input onde insiro o email  altere a propriedade width consoante o comprimento do mesmo.

HTML:

<div class="wey e">
                        <label>E-mail</label>
                        <br>
                        <div>
                            <img src="../../img/ico/mail.png">
                            <input name="email" type="email" value="<?php echo $email ?>">
                        </div>
                    </div>

CSS:

.wey input[type="email"]{
    border:1px black solid;
    width:auto;

Agradeço toda a ajuda possível : )

[DiF]

@Joel Martins Não sei se entendi...  mas se você quer aumentar o width do elemento automaticamente, isso deve ser feito por javascript. Por exemplo fazer disparar um evento onde manipula o CSS com keyframe( se você quer ver um efeito de crescimento de acordo com o "texo" digitado.

Mas dá pra fazer isso apenas com jquery.  fica meio feinho mas funciona algo assim:

 

<input type="text" placeholder="e-mail"/>

 

function aumentarWidth() {
    $(this).attr('size', $(this).val().length);
}

$('input[type="text"]').keyup(aumentarWidth).each(aumentarWidth);

 

Veja  funcionando: https://jsfiddle.net/dife/a6bx301p/2/  

Deve haver outras maneiras melhores de fazer.. mas essa quebra o galho.

[Joel Martins]

@DiF Muito obrigado pela ajuda ficou espetacular.