Html&JQuery datepicker css 변경하기
페이지 정보
작성자 디자인천일
작성일Date: 2025-03-27 21:11
조회view: 7
본문
datepicker css를 변경하여 디자인을 바꿈
css
/* calendar */
.datepicker {background:url(../img/icon_calendar.png) no-repeat right 50% #fff;}
.ui-datepicker {display:none;width:280px;padding:0;background:#fff;border:none;border-radius:0;z-index:999;}
.ui-datepicker .ui-datepicker-header {position:relative;background:#5bc0de;border:none;border-bottom:solid 1px #ddd;border-radius:0;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {position:absolute;top:50%;width:40px;height:50px;text-align:center;line-height:50px;background:none;border:none;border-radius:0;
-webkit-transform:translate(0,-50%);
-moz-transform:translate(0,-50%);
-ms-transform:translate(0,-50%);
-o-transform:translate(0,-50%);
transform:translate(0,-50%);
}
.ui-datepicker .ui-datepicker-prev {left:0;background:url(../img/btn_calendar.png) no-repeat 0 0;}
.ui-datepicker .ui-datepicker-next {right:0;background:url(../img/btn_calendar.png) no-repeat -40px 0;}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {background:none;}
.ui-datepicker .ui-datepicker-title {margin:0;padding:0;font-family:'Noto Sans KR';color:#fff;font-size:14px;line-height:50px;font-weight:400;text-align:center;}
.ui-datepicker table {width:100%;margin:0;padding:0;border-collapse:collapse;border:none;border-left:solid 1px #ddd;}
.ui-datepicker th {width:40px;height:40px;padding:0;font-family:'Noto Sans KR';color:#fff;text-align:center;line-height:40px;background:#5bc0de;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;}
.ui-datepicker td {width:40px;height:40px;padding:0;font-family:'Lato';text-align:center;line-height:40px !important;background:#fff;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd;border-radius:0;}
.ui-datepicker td span,
.ui-datepicker td a {display:inline-block;top:0;width:22px;height:22px;padding:0;text-align:center;line-height:18px;background:#fff !important;border:solid 2px #fff !important;border-radius:50%;
-webkit-transition: all 0s ease-out;
-moz-transition: all 0s ease-out;
-o-transition: all 0s ease-out;
transition: all 0s ease-out;
}
.ui-datepicker td:hover {}
.ui-datepicker td span:hover,
.ui-datepicker td a:hover {border:solid 2px #5bc0de !important;}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {color:#fff;background:#5bc0de !important;border:solid 2px #5bc0de !important;}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {background:#fff !important;border:solid 2px #5bc0de !important;}