如何设置jQuery日期选择器日历的样式?
我正尝试在div中使用DatePicker。我想在DatePicker日历打开时扩大div的高度。
我有一个类似的div:
.dateBox{
width:160px;
height:auto;
border:1px solid blue;
}
问题是,当您点击DatePicker输入并打开日历时,.DateBox的高度不会改变。我一直在胡闹,但我想不通……
我如何修复它?
直播:http://jsfiddle.net/fcrsznb1/2/
提前感谢!
解决方案
.ui-datepicker {
width: 300px;
height: 300px;
margin: 5px auto 0;
font: 12pt Arial, sans-serif;
/*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);*/
}
.ui-datepicker table {
width: 100%;
}
.ui-datepicker-header {
background: #3399ff;
color: #ffffff;
font-family:'Times New Roman';
border-width: 1px 0 0 0;
border-style: solid;
border-color: #111;
}
.ui-datepicker-title {
text-align: center;
font-size: 15px;
}
.ui-datepicker-prev {
float: left;
cursor: pointer;
background-position: center -30px;
}
.ui-datepicker-next {
float: right;
cursor: pointer;
background-position: center 0px;
}
.ui-datepicker thead {
background-color: #f7f7f7;
/*border-bottom: 1px solid #bbb;*/
}
.ui-datepicker th {
background-color:#808080;
text-transform: uppercase;
font-size: 8pt;
color: #666666;
/*text-shadow: 1px 0px 0px #fff;*/
/*filter: dropshadow(color=#fff, offx=1, offy=0);*/
}
.ui-datepicker tbody td {
padding: 0;
/*border-right: 1px solid #808080;*/
}
.ui-datepicker tbody td:last-child {
border-right: 0px;
}
.ui-datepicker tbody tr {
border-bottom: 1px solid #bbb;
}
.ui-datepicker tbody tr:last-child {
border-bottom: 0px;
}
.ui-datepicker a {
text-decoration: none;
}
.ui-datepicker td span, .ui-datepicker td a {
display: inline-block;
/*font-weight: bold;*/
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
color: #ffffff;
/*text-shadow: 1px 1px 0px #fff;*/
/*filter: dropshadow(color=#fff, offx=1, offy=1);*/
}
.ui-datepicker-calendar .ui-state-default {
background: linear-gradient(#999999, #737373);
color:#ffffff;
height:40px;
width:40px;
}
.ui-datepicker-calendar .ui-state-hover {
background: #33adff;
color: #FFFFFF;
}
.ui-datepicker-calendar .ui-state-active {
background: #33adff;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
color: #e0e0e0;
text-shadow: 0px 1px 0px #4d7a85;
border: 1px solid #55838f;
position: relative;
margin: -1px;
}
.ui-datepicker-unselectable .ui-state-default {
background: #D6E4BE;
color: #000;
}
相关文章