Question

见JSFIDDLE。我正在使用jqueryUI datepicker。如您所见，所选日期如下所示：

这是我的代码：

  .ui-state-highlight,
  .ui-widget-content .ui-state-highlight,
  .ui-widget-header .ui-state-highlight {
    border: 0;
    background: red;
    color: #ffffff;
    border-radius: 25px;
    text-align: center;
    background: red;
  }

我正在寻找使td看起来像这样的解决方案。

请注意background-color和border-color不相同。

注意：不建议使用图像精灵等。

请仅用css回答。

Answer 1

border-radius和background-color之间没有冲突。下面的示例border-radius实现了一个标签，你想在td中添加背景，所以这两个元素是分开的，如下所示：

 <a class="ui-state-default ui-state-highlight" href="#">19</a>
<td class=" ui-datepicker-days-cell-over  ui-datepicker-today" onclick="DP_jQuery_1484829217856.datepicker._selectDay('#datepicker',0,2017, this);return false;"><a class="ui-state-default ui-state-highlight" href="#">19</a></td>

所以你要覆盖css需要在css中添加！impotent。下面我更新了JSFIDDLE的代码。可以帮到你。

解决了链接：http://jsfiddle.net/6qLmnkac/7/

Answer 2

检查this - 如果您对td{position:relative}

没有任何问题

Answer 3

我猜您需要不同的背景颜色，这就是border-radius: 25px 0 0 25px;不适合您的原因。一种解决方案是选择背景并改变其梯度。我使用http://www.cssmatic.com/gradient-generator来生成颜色渐变。

＆＃13;

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 0;
  
  color: #ffffff;
  border-radius: 25px;
  text-align: center;
  
}
.ui-datepicker td {
    border: 0;
    padding: 0px;
}

//Create the gradient for the td here-- only for the selected date
//At the end date, reverse the gradient and it will look almost like the picture you shared. 
 .ui-datepicker-today {
 background: rgba(105,84,68,1);
background: -moz-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(47%, rgba(105,84,68,1)), color-stop(100%, rgba(173,217,120,1)));
background: -webkit-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: -o-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: -ms-linear-gradient(left, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
background: linear-gradient(to right, rgba(105,84,68,1) 47%, rgba(173,217,120,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#695444', endColorstr='#add978', GradientType=1 );
 }

＆＃13;

Answer 4

最后只使用css完成此操作，请参阅FIDDLE此处需要使用position和after。

$("#datepicker").datepicker();

.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 0;
  border-radius: 25px;
  text-align: center;
}
td {
  position: relative;
  z-index: 1111;
}
a.ui-state-default.ui-state-highlight:after {
  content: "";
  background: green;
  height: 23px;
  width: 25px;
  position: absolute;
  z-index: -1;
  right: 0;
  top: 1px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

  <div class="demo">

    <p>Date:
      <input id="datepicker" type="text">
    </p>

  </div>
  <!-- End demo -->

  <div style="display: none;" class="demo-description">
    <p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If
      a date is chosen, feedback is shown as the input's value.</p>
  </div>
  <!-- End demo-description -->
</body>

</html>

css

4 个答案: