現(xiàn)在很多網(wǎng)站都注重用戶體驗，特別是在輸入框的設計上，一個好看的輸入框可以使用戶更加舒適地輸入內(nèi)容。以下是一些好看的輸入框 CSS 設計。

input[type=text] {
border: none;
border-bottom: 2px solid #ccc;
background-color: transparent;
outline: none;
font-size: 16px;
padding: 10px 5px;
}

這個輸入框的設計非常簡潔大方，沒有多余的邊框，只有一條細線作為底邊。背景可以是透明的或者有一定透明度的顏色。鼠標交互時也沒有繁瑣的特效，只有簡單的下劃線動畫，符合簡約風格。

input[type=radio]:checked:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #007bff;
}

單選框的設計，最重要的是選中狀態(tài)和未選中狀態(tài)的區(qū)別。這個 CSS 設計使用了偽元素來實現(xiàn)選中狀態(tài)。選中的狀態(tài)是一個小圓點，顏色可以自定義。這個設計簡單明了，也不會產(chǎn)生額外的負擔。

textarea:focus {
resize: none;
box-shadow: inset 0 0 2px #007bff;
outline: none;
}

文本框也非常常見，這個設計是在文本框獲取焦點時出現(xiàn)一個深紅色的陰影。這個陰影不會擾亂文本的排版，也不會讓用戶分心，只是稍微提醒用戶自己現(xiàn)在正在輸入狀態(tài)。設計小巧精致。