border-radius and background-color conflict in css

ankitd Published at Dev

ankitd

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.

ankitd

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-04-14

Comments

0 comments

JavaFX - Border radius <-> Background color

Is there a way to reset the border, border-radius, and background-color CSS properties?

React Native Border Radius with background color

border-radius and background-color conflict in css

border-radius and background-color conflict in css

pump.io port in URL

grouping by column variables and appending a new variable based on condition

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

Group boxplot data while keeping their individual X axis labels in ggplot2 in R

Vector input in shiny R and then use it

BigQuery - concatenate ignoring NULL

Can a 32-bit antivirus program protect you from 64-bit threats

How to remove the extra space from right in a webview?

How to how increase/decrease compared to adjacent cell

android.content.Context.getSharedPreferences(java.lang.String, int)' on a null object reference id DBhandler

Getting 502 Bad Gateway Error While Deploying WordPress On Dockerized Lemp?

Type 'number' is not assignable to type 'NgIterable<any>' when trying to async observe a datasource

Check if a number is a perfect square

FFmpeg resize without upscaling

How do I display Label text character-by-character?

How to show an image in a View with ASP.NET MVC 5? (Many suggestions failed so far)

Json Schema - Conditional Evaluation with RegEx

PlayOnLinux displays weird looking window on 18.04 for MS Office installation

JMeter: Why get error when try to save test plan

Emulator wrong screen resolution in Android Studio 1.3