在前端開發中,<input>
標簽是非常常用的表單元素之一。我們可以結合CSS3來對它進行更豐富的樣式設計。
首先,我們可以使用border-radius
屬性來設置圓角。例如:
input { border-radius: 5px; }
接下來,我們可以對background-color
和color
屬性進行設置,分別為背景色和字體顏色。例如:
input { background-color: #eee; color: #333; }
除此之外,我們還可以使用placeholder
偽類選擇器來改變placeholder的樣式。例如:
input::placeholder { color: #aaa; }
如果要改變<input>
標簽的選中狀態,我們可以使用::selection
偽元素選擇器。例如:
input::selection { background-color: #007bff; color: #fff; }
最后,我們可以對<input>
標簽進行排列布局。比如左對齊、居中、右對齊等。例如:
/* 左對齊 */ input.left { float: left; } /* 右對齊 */ input.right { float: right; } /* 居中 */ input.center { display: block; margin: 0 auto; }
以上,就是<input>
標簽在CSS3中的基本用法。希望能對初學者有所幫助。
上一篇input 移除css
下一篇input css自定義