在網頁設計中,文本框是一個非常常見的元素。通過 CSS,我們可以對文本框的樣式進行自定義,以使其更符合我們的網頁主題和需求。
接下來,我們將會介紹一些常見的 CSS 文本框格式調整技巧。
/*1. 設置文本框的背景色和邊框*/ input[type=text]{ background-color: #ffffff; border: 1px solid #cccccc; } /*2. 調整文本框的內邊距、外邊距和大小*/ input[type=text]{ padding: 10px 15px; margin: 5px 0; width: 100%; } /*3. 設置文本框的圓角*/ input[type=text]{ border-radius: 5px; } /*4. 設置文本框的陰影*/ input[type=text]{ box-shadow: 2px 2px 5px #cccccc; } /*5. 設置文本框的字體和顏色*/ input[type=text]{ font-family: Arial, sans-serif; font-size: 14px; color: #333333; } /*6. 設置文本框的聚焦狀態*/ input[type=text]:focus{ background-color: #f2f2f2; border: 1px solid #4d90fe; outline: none; }
通過以上技巧,我們可以很輕松地調整文本框的樣式,讓其更加美觀、清晰、易用。
當然,以上的樣式設置不僅僅適用于文本框,也可以應用于其他表單元素,如文本域、下拉列表等。
上一篇css新屬性盒子邊框