CSS 是一個常用的頁面樣式設計語言，能夠改變頁面元素的樣式，使得網頁更加美觀和易于閱讀。而其中一個常用的 CSS 屬性就是設置 input 元素為只讀（readonly）狀態。 通過 CSS，我們可以使用 pre 標簽來設置 input 元素為只讀狀態。具體實現方法如下：

input[readonly] {
background-color: #f2f2f2;
cursor: not-allowed;
}

上面這段 CSS 代碼中，我們使用了屬性選擇器來指定只讀的 input 元素。同時，我們設置了背景顏色為 #f2f2f2，增加了輸入框的可讀性。同時，我們設置了鼠標光標為 not-allowed，以阻止用戶對只讀輸入框進行編輯。 在實際應用中，我們可以在 input 元素上添加 readonly 屬性來使其變為只讀狀態。例如：

上面這段 HTML 代碼中，我們將 input 元素的 readonly 屬性設置為 true，使其變為只讀狀態。同時，我們嵌套了一個 p 標簽，使得輸入框更好地和頁面排版相配合。 通過以上方法，我們可以輕松地使用 CSS 將 input 元素設置為只讀狀態。這不僅可以改善頁面的外觀，還能有效地限制用戶對輸入框的編輯行為，增強頁面的安全性。