動態text框是現在很流行的一種效果，網站中充滿了此種效果。在CSS樣式中，我們可以利用一些技巧來實現這種動態text框效果。

/* 對text框應用一個過渡效果 */
.text-box {
position: relative;
display: inline-block;
padding: 0.5rem 1rem;
background-color: #fff;
border: 1px solid #aaa;
transition: all 0.3s ease-in-out;
}
/* 當text框獲得焦點時應用新樣式 */
.text-box:focus {
border-color: #007bff;
box-shadow: 0 0 5px #007bff;
}
/* 當text框有輸入時應用新樣式 */
.text-box:not(:placeholder-shown) {
border-color: #007bff;
}
/* 當text框有輸入時并獲得焦點時應用新樣式 */
.text-box:not(:placeholder-shown):focus {
box-shadow: 0 0 5px #007bff;
}

這些基本的CSS樣式為你的text框創造了一些平滑而有吸引力的效果。預顯示文本，即placeholder，將是一個很好的方式來鼓勵客戶輸入他們需要的信息。

通過使用預顯示文本而不是永久顯示它，你可以減少混淆，從而使你的text框看起來更有條理和專業。