Textarea resize on click using HTML and CSS

how to expand a text area when click
how to expand a text area when click
how to expand a text area when click

Hello Friends today in this article we will learn Textarea resize on click using HTML and CSS, here you can download source file also…

Step -1 Add HTML

<input type="text" class="txtbox2" id="tbCountries" placeholder="Select City" /> 

Step-2 Add CSS

.txtbox2
{
	
	width:20%;
	height:30px;
	padding:5px;
	margin-top:5px;
	border-radius:50px;
	margin-right:7px;
	padding-left:30px;
	font-size:14px;
	background:#202020 url(Location_Icon.png) no-repeat left ;
	background-position: 7px 10px;
	color:#f2f2f2;
	outline:none;
	text-align:left;
	border:none;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s; 
	transition: 0.5s;
	
}

.txtbox2::placeholder
{
	color:#fff;
}

.txtbox2:focus {
	width:40%;
	transition: 0.5s;
}

Leave a Reply

Your email address will not be published. Required fields are marked *