CSS文本框樣式源代碼可用于美化文本框的外觀,使其在頁面中的顯示更加美觀、易于使用。在本文中,我們將介紹常用的CSS文本框樣式,以及它們的實現(xiàn)代碼。
/* 圓角文本框 */ input[type="text"], textarea { border-radius: 5px; border: 1px solid #ccc; padding: 5px; } /* 下拉菜單 */ select { width: 100%; padding: 5px; border: 1px solid #ccc; border-radius: 5px; background-color: #fff; appearance: none; -webkit-appearance: none; -moz-appearance: none; } /* 禁用狀態(tài) */ input[type="text"]:disabled, textarea:disabled, select:disabled { opacity: .5; cursor: not-allowed; } /* 文本框聚焦 */ input[type="text"]:focus, textarea:focus, select:focus { outline: none; box-shadow: 0 0 5px #ccc; } /* 高亮文本 */ textarea::selection, input[type="text"]::selection { background-color: #ffffcc; color: #f00; }
上述代碼中,圓角文本框樣式使用了border-radius屬性來實現(xiàn),下拉菜單樣式使用了appearance屬性以及對不同瀏覽器的兼容性寫法來實現(xiàn),禁用狀態(tài)設(shè)置了透明度和指針樣式。聚焦?fàn)顟B(tài)使用了outline和box-shadow屬性來實現(xiàn),高亮文本使用了::selection偽元素來實現(xiàn)。
使用這些CSS文本框樣式源代碼可以讓文本框在頁面中更加美觀、易于使用,從而提高網(wǎng)站的用戶體驗和可用性。