jQuery UI：DatePicker 只有 CSS？

jQuery UI: DatePicker ONLY CSS?

提问by Norbert

I'm using both the jQuery UI accordion and the datepicker.

我同时使用 jQuery UI 手风琴和日期选择器。

The accordion works great, but when I add the CSS file to the page (which is needed by the datepicker), everything goes nuts. I see that the script adds all kinds of classes to both widgets. Is there any way to get a separate CSS that only works for the datepicker? I tried downloading different files from their site, but nothing worked. Any suggestions?

手风琴效果很好，但是当我将 CSS 文件添加到页面（日期选择器需要）时，一切都变得疯狂。我看到脚本向两个小部件添加了各种类。有没有办法获得仅适用于日期选择器的单独 CSS？我尝试从他们的网站下载不同的文件，但没有任何效果。有什么建议？

采纳答案by Derek Adair

Yes you can. Using the jquery UI themeroller scope.

是的你可以。使用 jquery UI themeroller scope。

In the right hand column of the download section(under the theme drop-down menu) There is a link to open the advanced menu. The value you input for the scope can be a custom class - such as .ui-stylizedor whatever you class you want the css to apply to. You can even mix and match entire themes if you'd like.

在下载部分的右侧栏中（在主题下拉菜单下）有一个打开高级菜单的链接。您为范围输入的值可以是自定义类 - 例如.ui-stylized或您希望 css 应用到的任何类。如果您愿意，您甚至可以混合搭配整个主题。

I would recommend using the themeroller to modify any jquery ui specific CSS.

我建议使用themeroller 修改任何jquery ui 特定的CSS。

Cheers!

干杯!

回答by Sam Jones

Datepicker only (jquery.ui.datepicker.css):

仅限日期选择器（jquery.ui.datepicker.css）：

/*!
 * jQuery UI Datepicker 1.9.0
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Datepicker#theming
 */
.ui-datepicker {
    display: none;
    padding: .2em .2em 0;
    width: 17em;
}

.ui-datepicker .ui-datepicker-header {
    padding: .2em 0;
    position: relative;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    height: 1.8em;
    position: absolute;
    top: 2px;
    width: 1.8em;
}

.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }

.ui-datepicker .ui-datepicker-prev { left: 2px; }

.ui-datepicker .ui-datepicker-next { right: 2px; }

.ui-datepicker .ui-datepicker-prev-hover { left: 1px; }

.ui-datepicker .ui-datepicker-next-hover { right: 1px; }

.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
}

.ui-datepicker .ui-datepicker-title {
    line-height: 1.8em;
    margin: 0 2.3em;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
    font-size: 1em;
    margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month-year { width: 100%; }

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%; }

.ui-datepicker table {
    border-collapse: collapse;
    font-size: .9em;
    margin: 0 0 .4em;
    width: 100%;
}

.ui-datepicker th {
    border: 0;
    font-weight: bold;
    padding: .7em .3em;
    text-align: center;
}

.ui-datepicker td {
    border: 0;
    padding: 1px;
}

.ui-datepicker td span, .ui-datepicker td a {
    display: block;
    padding: .2em;
    text-align: right;
    text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background-image: none;
    border-bottom: 0;
    border-left: 0;
    border-right: 0;
    margin: .7em 0 0 0;
    padding: 0 .2em;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    cursor: pointer;
    float: right;
    margin: .5em .2em .4em;
    overflow: visible;
    padding: .2em .6em .3em .6em;
    width: auto;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; }

/* with multiple calendars */

.ui-datepicker.ui-datepicker-multi { width: auto; }

.ui-datepicker-multi .ui-datepicker-group { float: left; }

.ui-datepicker-multi .ui-datepicker-group table {
    margin: 0 auto .4em;
    width: 95%;
}

.ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; }

.ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; }

.ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; }

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width: 0; }

.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; }

.ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; }

.ui-datepicker-row-break {
    clear: both;
    font-size: 0em;
    width: 100%;
}

/* RTL support */

.ui-datepicker-rtl { direction: rtl; }

.ui-datepicker-rtl .ui-datepicker-prev {
    left: auto;
    right: 2px;
}

.ui-datepicker-rtl .ui-datepicker-next {
    left: 2px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
    left: auto;
    right: 1px;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
    left: 1px;
    right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; }

.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float: right; }

.ui-datepicker-rtl .ui-datepicker-group { float: right; }

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header {
    border-left-width: 1px;
    border-right-width: 0;
}

.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
    border-left-width: 1px;
    border-right-width: 0;
}

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */

.ui-datepicker-cover {
    filter: mask(); /*must have*/
    height: 200px; /*must have*/
    left: -4px; /*must have*/
    position: absolute; /*must have*/
    top: -4px; /*must have*/
    width: 200px; /*must have*/
    z-index: -1; /*must have*/
}

Accordion only (jquery.ui.accordion.css):

仅限手风琴（jquery.ui.accordion.css）：

/*!
 * jQuery UI Accordion 1.9.0
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Accordion#theming
 */
.ui-accordion .ui-accordion-header {
    cursor: pointer;
    display: block;
    margin-top: 2px;
    padding: .5em .5em .5em .7em;
    position: relative;
    zoom: 1;
}

.ui-accordion .ui-accordion-icons { padding-left: 2.2em; }

.ui-accordion .ui-accordion-noicons { padding-left: .7em; }

.ui-accordion .ui-accordion-icons .ui-accordion-icons { padding-left: 2.2em; }

.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
    left: .5em;
    margin-top: -8px;
    position: absolute;
    top: 50%;
}

.ui-accordion .ui-accordion-content {
    border-top: 0;
    overflow: auto;
    padding: 1em 2.2em;
    zoom: 1;
}

You'll also need the base theme (jquery.ui.theme.css):

您还需要基本主题 (jquery.ui.theme.css)：

/*!
 * jQuery UI CSS Framework 1.9.0
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Released under the MIT license.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/
 */


/* Component containers
----------------------------------*/

.ui-widget {
    font-family: Verdana, Arial, sans-serif/*{ffDefault}*/;
    font-size: 1.1em/*{fsDefault}*/;
}

.ui-widget .ui-widget { font-size: 1em; }

.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family: Verdana, Arial, sans-serif/*{ffDefault}*/;
    font-size: 1em;
}

.ui-widget-content {
    background: #ffffff /*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png) /*{bgImgUrlContent}*/ 50% /*{bgContentXPos}*/ 50% /*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
    border: 1px solid #aaaaaa/*{borderColorContent}*/;
    color: #222222/*{fcContent}*/;
}

.ui-widget-content a { color: #222222/*{fcContent}*/; }

.ui-widget-header {
    background: #cccccc /*{bgColorHeader}*/ url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) /*{bgImgUrlHeader}*/ 50% /*{bgHeaderXPos}*/ 50% /*{bgHeaderYPos}*/ repeat-x/*{bgHeaderRepeat}*/;
    border: 1px solid #aaaaaa/*{borderColorHeader}*/;
    color: #222222/*{fcHeader}*/;
    font-weight: bold;
}

.ui-widget-header a { color: #222222/*{fcHeader}*/; }

/* Interaction states
----------------------------------*/

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    background: #e6e6e6 /*{bgColorDefault}*/ url(images/ui-bg_glass_75_e6e6e6_1x400.png) /*{bgImgUrlDefault}*/ 50% /*{bgDefaultXPos}*/ 50% /*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/;
    border: 1px solid #d3d3d3/*{borderColorDefault}*/;
    color: #555555/*{fcDefault}*/;
    font-weight: normal/*{fwDefault}*/;
}

.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
    color: #555555/*{fcDefault}*/;
    text-decoration: none;
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
    background: #dadada /*{bgColorHover}*/ url(images/ui-bg_glass_75_dadada_1x400.png) /*{bgImgUrlHover}*/ 50% /*{bgHoverXPos}*/ 50% /*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/;
    border: 1px solid #999999/*{borderColorHover}*/;
    color: #212121/*{fcHover}*/;
    font-weight: normal/*{fwDefault}*/;
}

.ui-state-hover a, .ui-state-hover a:hover {
    color: #212121/*{fcHover}*/;
    text-decoration: none;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: #ffffff /*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png) /*{bgImgUrlActive}*/ 50% /*{bgActiveXPos}*/ 50% /*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/;
    border: 1px solid #aaaaaa/*{borderColorActive}*/;
    color: #212121/*{fcActive}*/;
    font-weight: normal/*{fwDefault}*/;
}

.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
    color: #212121/*{fcActive}*/;
    text-decoration: none;
}

/* Interaction Cues
----------------------------------*/

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    background: #fbf9ee /*{bgColorHighlight}*/ url(images/ui-bg_glass_55_fbf9ee_1x400.png) /*{bgImgUrlHighlight}*/ 50% /*{bgHighlightXPos}*/ 50% /*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/;
    border: 1px solid #fcefa1/*{borderColorHighlight}*/;
    color: #363636/*{fcHighlight}*/;
}

.ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {
    background: #fef1ec /*{bgColorError}*/ url(images/ui-bg_glass_95_fef1ec_1x400.png) /*{bgImgUrlError}*/ 50% /*{bgErrorXPos}*/ 50% /*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/;
    border: 1px solid #cd0a0a/*{borderColorError}*/;
    color: #cd0a0a/*{fcError}*/;
}

.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a/*{fcError}*/; }

.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }

.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }

.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {
    filter: Alpha(Opacity=70);
    font-weight: normal;
    opacity: .7;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    background-image: none;
    filter: Alpha(Opacity=35);
    opacity: .35;
}

/* Icons
----------------------------------*/

/* states and images */

.ui-icon {
    background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/;
    height: 16px;
    width: 16px;
}

.ui-widget-content .ui-icon { background-image: url(images/ui-icons_222222_256x240.png)/*{iconsContent}*/; }

.ui-widget-header .ui-icon { background-image: url(images/ui-icons_222222_256x240.png)/*{iconsHeader}*/; }

.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png)/*{iconsDefault}*/; }

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-image: url(images/ui-icons_454545_256x240.png)/*{iconsHover}*/; }

.ui-state-active .ui-icon { background-image: url(images/ui-icons_454545_256x240.png)/*{iconsActive}*/; }

.ui-state-highlight .ui-icon { background-image: url(images/ui-icons_2e83ff_256x240.png)/*{iconsHighlight}*/; }

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url(images/ui-icons_cd0a0a_256x240.png)/*{iconsError}*/; }

/* positioning */

.ui-icon-carat-1-n { background-position: 0 0; }

.ui-icon-carat-1-ne { background-position: -16px 0; }

.ui-icon-carat-1-e { background-position: -32px 0; }

.ui-icon-carat-1-se { background-position: -48px 0; }

.ui-icon-carat-1-s { background-position: -64px 0; }

.ui-icon-carat-1-sw { background-position: -80px 0; }

.ui-icon-carat-1-w { background-position: -96px 0; }

.ui-icon-carat-1-nw { background-position: -112px 0; }

.ui-icon-carat-2-n-s { background-position: -128px 0; }

.ui-icon-carat-2-e-w { background-position: -144px 0; }

.ui-icon-triangle-1-n { background-position: 0 -16px; }

.ui-icon-triangle-1-ne { background-position: -16px -16px; }

.ui-icon-triangle-1-e { background-position: -32px -16px; }

.ui-icon-triangle-1-se { background-position: -48px -16px; }

.ui-icon-triangle-1-s { background-position: -64px -16px; }

.ui-icon-triangle-1-sw { background-position: -80px -16px; }

.ui-icon-triangle-1-w { background-position: -96px -16px; }

.ui-icon-triangle-1-nw { background-position: -112px -16px; }

.ui-icon-triangle-2-n-s { background-position: -128px -16px; }

.ui-icon-triangle-2-e-w { background-position: -144px -16px; }

.ui-icon-arrow-1-n { background-position: 0 -32px; }

.ui-icon-arrow-1-ne { background-position: -16px -32px; }

.ui-icon-arrow-1-e { background-position: -32px -32px; }

.ui-icon-arrow-1-se { background-position: -48px -32px; }

.ui-icon-arrow-1-s { background-position: -64px -32px; }

.ui-icon-arrow-1-sw { background-position: -80px -32px; }

.ui-icon-arrow-1-w { background-position: -96px -32px; }

.ui-icon-arrow-1-nw { background-position: -112px -32px; }

.ui-icon-arrow-2-n-s { background-position: -128px -32px; }

.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }

.ui-icon-arrow-2-e-w { background-position: -160px -32px; }

.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }

.ui-icon-arrowstop-1-n { background-position: -192px -32px; }

.ui-icon-arrowstop-1-e { background-position: -208px -32px; }

.ui-icon-arrowstop-1-s { background-position: -224px -32px; }

.ui-icon-arrowstop-1-w { background-position: -240px -32px; }

.ui-icon-arrowthick-1-n { background-position: 0 -48px; }

.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }

.ui-icon-arrowthick-1-e { background-position: -32px -48px; }

.ui-icon-arrowthick-1-se { background-position: -48px -48px; }

.ui-icon-arrowthick-1-s { background-position: -64px -48px; }

.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }

.ui-icon-arrowthick-1-w { background-position: -96px -48px; }

.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }

.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }

.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }

.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }

.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }

.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }

.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }

.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }

.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }

.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }

.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }

.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }

.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }

.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }

.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }

.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }

.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }

.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }

.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }

.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }

.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }

.ui-icon-arrow-4 { background-position: 0 -80px; }

.ui-icon-arrow-4-diag { background-position: -16px -80px; }

.ui-icon-extlink { background-position: -32px -80px; }

.ui-icon-newwin { background-position: -48px -80px; }

.ui-icon-refresh { background-position: -64px -80px; }

.ui-icon-shuffle { background-position: -80px -80px; }

.ui-icon-transfer-e-w { background-position: -96px -80px; }

.ui-icon-transferthick-e-w { background-position: -112px -80px; }

.ui-icon-folder-collapsed { background-position: 0 -96px; }

.ui-icon-folder-open { background-position: -16px -96px; }

.ui-icon-document { background-position: -32px -96px; }

.ui-icon-document-b { background-position: -48px -96px; }

.ui-icon-note { background-position: -64px -96px; }

.ui-icon-mail-closed { background-position: -80px -96px; }

.ui-icon-mail-open { background-position: -96px -96px; }

.ui-icon-suitcase { background-position: -112px -96px; }

.ui-icon-comment { background-position: -128px -96px; }

.ui-icon-person { background-position: -144px -96px; }

.ui-icon-print { background-position: -160px -96px; }

.ui-icon-trash { background-position: -176px -96px; }

.ui-icon-locked { background-position: -192px -96px; }

.ui-icon-unlocked { background-position: -208px -96px; }

.ui-icon-bookmark { background-position: -224px -96px; }

.ui-icon-tag { background-position: -240px -96px; }

.ui-icon-home { background-position: 0 -112px; }

.ui-icon-flag { background-position: -16px -112px; }

.ui-icon-calendar { background-position: -32px -112px; }

.ui-icon-cart { background-position: -48px -112px; }

.ui-icon-pencil { background-position: -64px -112px; }

.ui-icon-clock { background-position: -80px -112px; }

.ui-icon-disk { background-position: -96px -112px; }

.ui-icon-calculator { background-position: -112px -112px; }

.ui-icon-zoomin { background-position: -128px -112px; }

.ui-icon-zoomout { background-position: -144px -112px; }

.ui-icon-search { background-position: -160px -112px; }

.ui-icon-wrench { background-position: -176px -112px; }

.ui-icon-gear { background-position: -192px -112px; }

.ui-icon-heart { background-position: -208px -112px; }

.ui-icon-star { background-position: -224px -112px; }

.ui-icon-link { background-position: -240px -112px; }

.ui-icon-cancel { background-position: 0 -128px; }

.ui-icon-plus { background-position: -16px -128px; }

.ui-icon-plusthick { background-position: -32px -128px; }

.ui-icon-minus { background-position: -48px -128px; }

.ui-icon-minusthick { background-position: -64px -128px; }

.ui-icon-close { background-position: -80px -128px; }

.ui-icon-closethick { background-position: -96px -128px; }

.ui-icon-key { background-position: -112px -128px; }

.ui-icon-lightbulb { background-position: -128px -128px; }

.ui-icon-scissors { background-position: -144px -128px; }

.ui-icon-clipboard { background-position: -160px -128px; }

.ui-icon-copy { background-position: -176px -128px; }

.ui-icon-contact { background-position: -192px -128px; }

.ui-icon-image { background-position: -208px -128px; }

.ui-icon-video { background-position: -224px -128px; }

.ui-icon-script { background-position: -240px -128px; }

.ui-icon-alert { background-position: 0 -144px; }

.ui-icon-info { background-position: -16px -144px; }

.ui-icon-notice { background-position: -32px -144px; }

.ui-icon-help { background-position: -48px -144px; }

.ui-icon-check { background-position: -64px -144px; }

.ui-icon-bullet { background-position: -80px -144px; }

.ui-icon-radio-on { background-position: -96px -144px; }

.ui-icon-radio-off { background-position: -112px -144px; }

.ui-icon-pin-w { background-position: -128px -144px; }

.ui-icon-pin-s { background-position: -144px -144px; }

.ui-icon-play { background-position: 0 -160px; }

.ui-icon-pause { background-position: -16px -160px; }

.ui-icon-seek-next { background-position: -32px -160px; }

.ui-icon-seek-prev { background-position: -48px -160px; }

.ui-icon-seek-end { background-position: -64px -160px; }

.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */

.ui-icon-seek-first { background-position: -80px -160px; }

.ui-icon-stop { background-position: -96px -160px; }

.ui-icon-eject { background-position: -112px -160px; }

.ui-icon-volume-off { background-position: -128px -160px; }

.ui-icon-volume-on { background-position: -144px -160px; }

.ui-icon-power { background-position: 0 -176px; }

.ui-icon-signal-diag { background-position: -16px -176px; }

.ui-icon-signal { background-position: -32px -176px; }

.ui-icon-battery-0 { background-position: -48px -176px; }

.ui-icon-battery-1 { background-position: -64px -176px; }

.ui-icon-battery-2 { background-position: -80px -176px; }

.ui-icon-battery-3 { background-position: -96px -176px; }

.ui-icon-circle-plus { background-position: 0 -192px; }

.ui-icon-circle-minus { background-position: -16px -192px; }

.ui-icon-circle-close { background-position: -32px -192px; }

.ui-icon-circle-triangle-e { background-position: -48px -192px; }

.ui-icon-circle-triangle-s { background-position: -64px -192px; }

.ui-icon-circle-triangle-w { background-position: -80px -192px; }

.ui-icon-circle-triangle-n { background-position: -96px -192px; }

.ui-icon-circle-arrow-e { background-position: -112px -192px; }

.ui-icon-circle-arrow-s { background-position: -128px -192px; }

.ui-icon-circle-arrow-w { background-position: -144px -192px; }

.ui-icon-circle-arrow-n { background-position: -160px -192px; }

.ui-icon-circle-zoomin { background-position: -176px -192px; }

.ui-icon-circle-zoomout { background-position: -192px -192px; }

.ui-icon-circle-check { background-position: -208px -192px; }

.ui-icon-circlesmall-plus { background-position: 0 -208px; }

.ui-icon-circlesmall-minus { background-position: -16px -208px; }

.ui-icon-circlesmall-close { background-position: -32px -208px; }

.ui-icon-squaresmall-plus { background-position: -48px -208px; }

.ui-icon-squaresmall-minus { background-position: -64px -208px; }

.ui-icon-squaresmall-close { background-position: -80px -208px; }

.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }

.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }

.ui-icon-grip-solid-vertical { background-position: -32px -224px; }

.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }

.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }

.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    -khtml-border-top-left-radius: 4px/*{cornerRadius}*/;
    -moz-border-radius-topleft: 4px/*{cornerRadius}*/;
    -webkit-border-top-left-radius: 4px/*{cornerRadius}*/;
    border-top-left-radius: 4px/*{cornerRadius}*/;
}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    -khtml-border-top-right-radius: 4px/*{cornerRadius}*/;
    -moz-border-radius-topright: 4px/*{cornerRadius}*/;
    -webkit-border-top-right-radius: 4px/*{cornerRadius}*/;
    border-top-right-radius: 4px/*{cornerRadius}*/;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/;
    -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/;
    -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/;
    border-bottom-left-radius: 4px/*{cornerRadius}*/;
}

.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/;
    -moz-border-radius-bottomright: 4px/*{cornerRadius}*/;
    -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/;
    border-bottom-right-radius: 4px/*{cornerRadius}*/;
}

/* Overlays */

.ui-widget-overlay {
    background: #aaaaaa /*{bgColorOverlay}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png) /*{bgImgUrlOverlay}*/ 50% /*{bgOverlayXPos}*/ 50% /*{bgOverlayYPos}*/ repeat-x/*{bgOverlayRepeat}*/;
    filter: Alpha(Opacity=30)/*{opacityOverlay}*/;
    opacity: .3;
}

.ui-widget-shadow {
    -khtml-border-radius: 8px/*{cornerRadiusShadow}*/;
    -moz-border-radius: 8px/*{cornerRadiusShadow}*/;
    -webkit-border-radius: 8px/*{cornerRadiusShadow}*/;
    background: #aaaaaa /*{bgColorShadow}*/ url(images/ui-bg_flat_0_aaaaaa_40x100.png) /*{bgImgUrlShadow}*/ 50% /*{bgShadowXPos}*/ 50% /*{bgShadowYPos}*/ repeat-x/*{bgShadowRepeat}*/;
    border-radius: 8px/*{cornerRadiusShadow}*/;
    filter: Alpha(Opacity=30)/*{opacityShadow}*/;
    margin: -8px /*{offsetTopShadow}*/ 0 0 -8px/*{offsetLeftShadow}*/;
    opacity: .3;
    padding: 8px/*{thicknessShadow}*/;
}

回答by Stuart Burrows

Is the issue that the CSS for the datepicker affects the accordion layout/usability? Easiest solution is to wrap each item in it's own div with a specific class then use that class to tailor the CSS.

日期选择器的 CSS 是否会影响手风琴布局/可用性？最简单的解决方案是使用特定类将每个项目包装在它自己的 div 中，然后使用该类来定制 CSS。