Onclick in CSS

HTML & CSS
1 
.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:

image
image1307×91 2.94 KB

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?

2

Would it work if you used focus rather than active?

3 Likes
3

Thanks, it worked like a charm.

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.