HTML文件內(nèi)容：

<form>
<label>姓名：</label>
<input type="text" name="name" id="name" class="input-text" />
<br /><br />
<label>地址：</label>
<input type="text" name="address" id="address" class="input-text" />
<br /><br />
<label>電話：</label>
<input type="text" name="phone" id="phone" class="input-text" />
<br /><br />
<input type="submit" name="submit" class="submit-btn" value="提交" />
</form>

CSS文件內(nèi)容：

/* 設置文本框樣式 */
.input-text {
width: 200px; /* 設置默認寬度 */
height: 30px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
font-size: 14px;
}
/* 鼠標移上去時的樣式 */
.input-text:hover {
border-color: #999;
}
/* 設置文本框獲得焦點時的樣式 */
.input-text:focus {
border-color: #666;
box-shadow: 0 0 5px #666;
}
/* 文本框隨著輸入內(nèi)容變長 */
.input-text[type="text"] {
transition: width 0.3s ease-in-out;
}
.input-text[type="text"]:focus {
width: 300px;
}

在上述代碼中，我們使用了transition屬性和:focus偽類來實現(xiàn)文本框隨著輸入內(nèi)容變長的效果。當我們在輸入文本時，文本框的寬度也會跟著變化。如果想要讓文本框變得更寬，我們可以在:focus偽類中設置更大的width值，這樣當我們點擊文本框時，它就會變成更寬的大小。