html - text dissapears when cursor is not on input field css -

html - text dissapears when cursor is not on input field css -

here css code:

#text3 { background: #333; color: #ccc; width: 50px; height: 25px; padding: 6px 15px 6px 35px; border-radius: 50px; transition: 1s ease; outline: 0; } #text3:hover { width: 250px; }

and here html code:

<input type="text" name="username" id="text3"/>

so problem when user's cursor on input field becomes larger , thats fine when types in , it's cursor goes away text field becomes smaller , there no text in there. know field should become little when user's cursor not on text field why text dissapear? hope can help me. give thanks you.

you should style focus state too.

#text3:focus, #text3:hover { width: 250px; }

jsfiddle

update:

do using jquery , never first state

$('input').on('focus', function () { $(this).addclass('big'); });

jsfiddle

html css css3