怎么设置jQuery日期选择器日历的样式?
本教程将介绍如何设置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;
}
好了关于怎么设置jQuery日期选择器日历的样式?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。