Transition property not working on width and focus

.classname form input {
	border: 0;	
	border-radius: 0;
	color: #c4c4c8;
	font-size: 20px;
	min-width: 0px;
	padding: 9px 0 9px 15px;
	padding-left: 38px;
	width: 200px;
	-webkit-appearance: none;
	outline: none;
	transition: all 0.6s ease;
}
.classname form input:focus {
	width: 150%;
}

The problem I am facing is that when focus property is active on mouse click the increase in width at that time doesnt happens smoothly under the influence of transition property.

Where am I faltering? Is there any syntax error?

That code is working for me.

You must have something else going on.

1 Like

Hi there @PaulOB

When the units were different(px and percentage) they logic was not working.

But when I changed this to a pixel unit:

.recenticle form input:focus {
	width: 150%;
}

That transition logic starts working, but I see in your codepen that you are also using px and percentage together, and the logic works. There must be something else that is causing both px and percentage not to work together in my case.

150% of what?

If the element is in a context where it’s container does not contain a usable width then 150% may have no basis.

That’s why I said the problem is in something you haven’t shown. The input may be in a floated contex or flexbox context or any other shrink to fit algorithm.

If the width of the parent depends on the width of its child which depends on the width of its parent then the browser may give up :slight_smile:

1 Like