CSS(層疊樣式表)是網頁開發中必不可少的一部分。在網頁開發中,一個常見的需求是美化頁面上的表單元素,比如輸入框、按鈕等。
在 CSS 中,通過選擇器來選取網頁中的元素進行樣式的設置。而在美化表單元素方面,input 元素的選擇器則顯得尤為重要。下面,我們將簡單介紹幾種 input 選擇器。
/* 選取所有 input 元素,并設置寬高為 200px、邊框為實線、背景色為淡藍色 */ input { width: 200px; height: 30px; border: 1px solid #ccc; background-color: #f0f8ff; }
以上代碼將選取網頁上所有 input 元素,并設置它們的寬度為 200px,高度為 30px,邊框為 1px 實線,背景色為淡藍色。
/* 選取 type 為 text 的 input 元素,并設置圓角邊框、漸變背景色 */ input[type='text'] { border-radius: 5px; background: linear-gradient(to bottom, #f9f9f9, #f1f1f1); }
以上代碼將選取網頁上所有 type 屬性為 text 的 input 元素,并設置它們的邊框為圓角邊框,背景為從上到下的漸變色。
/* 選取 type 為 submit 的 input 元素,并設置背景色、懸停樣式 */ input[type='submit'] { background-color: #6495ed; color: #fff; border: none; padding: 10px 20px; cursor: pointer; } input[type='submit']:hover { background-color: #4169e1; }
以上代碼將選取網頁上所有 type 屬性為 submit 的 input 元素,并設置它們的背景色為藍色、文本顏色為白色、邊框為無,添加 padding 為 10px 20px,改變鼠標指針為手型。同時,當鼠標懸停在輸入按鈕上時,背景色會變為更深的藍色。
總之,通過選擇器對 input 元素進行美化是很容易的,而以上這三個示例只是其中的一小部分,CSS 還有很多其他的選擇器等待我們去探索。