CSS搜索框樣式屬性是前端開發人員在設計搜索框時繞不開的重要知識點。下面介紹搜索框的常用CSS樣式屬性。
/* 文本框樣式 */ input[type="text"] { /* 字體大小 */ font-size: 14px; /* 字體顏色 */ color: #333; /* 邊框樣式 */ border: 2px solid #ccc; /* 邊框圓角 */ border-radius: 5px; /* 背景顏色 */ background-color: #fff; /* 內間距 */ padding: 5px 10px; } /* 搜索按鈕樣式 */ button[type="submit"] { /* 字體大小 */ font-size: 14px; /* 字體顏色 */ color: #fff; /* 背景顏色 */ background-color: #333; /* 邊框圓角 */ border-radius: 5px; /* 內間距 */ padding: 5px 10px; } /* 鼠標指向樣式 */ :hover { /* 邊框帶樣式 */ border: 2px solid #333; /* 字體加粗 */ font-weight: bold; }
以上是常用的搜索框CSS樣式屬性,根據實際需要,可以進行更多的樣式定制。通過運用這些樣式屬性,可以打造出符合自己品牌及需求的搜索框樣式。
上一篇css提示框教程
下一篇css表格行與行間距