border-radius and background-color conflict in css
Question
See this JSFIDDLE . I am using jqueryUI datepicker. As you can see selected date looks like this:
Here is my code:
.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;
}
I am looking for a solution which makes td looks like this.
Keep in mind background-color and border-color is not same.
Note: dont suggest to use image sprite etc.
Please give an answer only with css.
4 answers
solution1
0 2017-01-19 12:52:49
There is no conflict between border-radius and background-color. below example border-radius implement at a tag and you want to add the background in td so both element are separate like below :
<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>
so where you want to override the css need to add !impotent in the css. below i have updated the code at JSFIDDLE. may help you.
solved link : http://jsfiddle.net/6qLmnkac/7/
solution2
0 2017-01-19 12:57:29
Check this - if you have no problem with td{position:relative}
solution3
0 2017-01-19 20:00:03
I guess you need a different background colour which is why border-radius: 25px 0 0 25px; doesn't work for you. One solution is to select the background and change its gradient. I have used http://www.cssmatic.com/gradient-generator to generate the color-gradient.
.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 ); }
solution4
0 ACCPTED 2017-01-30 11:55:50
Finally done this only with css, see FIDDLE here One need to play a bit with position and 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.