Onclick in CSS

.rsearch input {
	padding: 10px 0px;
	border: none;
	border-bottom: 2px solid #EEEEEE;
	font-size: 1.3rem;
	width: 150px;
	outline: none;
}
.rsearch input:active {
	width: 250px;
}

Hi there, I was looking for when an input of form is clicked its width should increase:

The above CSS works, but as soon as I release the mouse click it disappears. Can I do this w.o using JS that once clicked it should stay unless the mouse has hovered away from that?

Would it work if you used focus rather than active?

3 Likes

Thanks, it worked like a charm.

1 Like