CSS3是一種用于網頁設計的語言,它可以實現多種效果,其中包括選日期功能。通過CSS3,我們可以創建一個美觀、易用的日期選擇器,讓用戶輕松地選擇日期。
.date-picker { display: inline-block; position: relative; } .date-picker input { width: 100%; height: 32px; padding: 8px; border: 1px solid #ddd; background-color: #fff; color: #333; font-size: 14px; cursor: pointer; } .date-picker::after { content: '\f073'; font-family: 'FontAwesome'; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 16px; color: #333; pointer-events: none; } .date-picker-popup { display: none; position: absolute; top: 100%; left: 0; z-index: 9999; width: 240px; background-color: #fff; border: 1px solid #ddd; padding: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); } .date-picker-popup.visible { display: block; } .date-picker-calendar { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; padding: 0; margin: 0; } .date-picker-calendar li { width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; cursor: pointer; margin: 5px; } .date-picker-calendar li.selected { background-color: #333; color: #fff; }
代碼中定義了一個名為.date-picker的類,它用于包裹日期選擇器的輸入框和彈出框。輸入框使用了input標簽,并設置了寬度、高度、邊框、背景色、字體大小等樣式。類名為.date-picker的偽類::after用于在輸入框后添加一個指向彈出框的箭頭。彈出框使用了類名為.date-picker-popup的div,并設置了絕對定位、背景色、邊框、陰影等樣式。
日期選擇器中最重要的是彈出的日歷部分,它使用了一個名為.date-picker-calendar的class,內部包含了很多日期單元格,每個單元格都是一個li標簽。如果用戶點擊了一個日期單元格,它的class會變為selected,同時會更新輸入框中的日期。
使用這個CSS3代碼,我們可以輕松地在網頁上添加一個日期選擇器,讓用戶方便選擇所需日期,提高網站的用戶體驗。
下一篇css3選擇器選擇奇偶