在我們的web應用中，輸入框是很常見的。它們被用來接受用戶的輸入數據，而且我們經常希望能夠在不同的設備上呈現出一致美觀的輸入框樣式。CSS就是用來做這個事情的，它能夠幫助我們控制輸入框的外觀和行為。

在許多情況下，我們希望輸入框的寬度能夠自適應用戶的輸入。這意味著輸入框的寬度應該根據用戶輸入的文本內容而變化。幸運的是，我們可以使用CSS輕松實現這個自適應寬度的功能。下面是一個示例，代碼塊使用pre標簽展示：

<input type="text" class="input-box" placeholder="請輸入內容">
.input-box {
width: 100%;
box-sizing: border-box;
}

在這里，我們首先給輸入框一個類名“input-box”，然后設定它的寬度為100%。例如，在一個page中，這意味著輸入框將占據它所在的容器的全部寬度。

我們也加了一個box-sizing屬性并把它的值設為border-box。這是為了確保輸入框的實際寬度不會受到padding和border的影響，這樣我們才能真正的實現自適應寬度。

最后，我們需要通過在輸入框的HTML標簽中指定一個placeholder屬性，來告訴用戶應該在這個地方輸入什么。這將在輸入框中顯示一條灰色的占位符文本，用戶可以在里面輸入他們的內容。

通過使用CSS和HTML的這些屬性和元素，我們可以在我們的web應用中創建優雅的輸入框，而且也具有自適應寬度的功能。它們會使你的應用的用戶界面看起來更加完美。