Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Time picker color change issue

robbyirish free asked 3 years ago


Expected behavior class .timepicker-circle to respect css background colour.

Actual behavior Class .timepicker-circle ignores background color css and remains the default blue. Could this be because the colour is provided as an inline RBG value by the script and if so, how would be the best way to actually change the colour?

Resources (screenshots, code snippets etc.)

Here's the CSS code I am using:

.timepicker-button {
    color: #000000;
}

.timepicker-head, .timepicker-middle-dot, .timepicker-hand-pointer, .timepicker-circle {
    background-color: #000000;
}

here's a snippet:

https://mdbootstrap.com/snippets/standard/robbyirish/3169264


Michał Duszak staff commented 3 years ago

Hello, this circle is created with border. Try this:

.timepicker-circle { border: 14px solid #000000; }


robbyirish free commented 3 years ago

Hi Michal,

That only changes the colour when moving. As soon as a time is selected it is still the blue. Looking at the html it shows this:

<code>
<div class="timepicker-circle position-absolute" style="background-color: rgb(25, 118,         210);"></div>
</code>

That inline RBG value is the blue and overrides the background-colour I set for.timepicker-circle


Michał Duszak staff commented 3 years ago

Try .timepicker-time-tips-hours.active, .timepicker-time-tips-inner.active, .timepicker-time-tips-minutes.active { background-color: black; }


robbyirish free commented 3 years ago

that does the trick, thank you!


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.8.1
  • Device: MacBook pro
  • Browser: safari and chrome
  • OS: Big Sur 11.4
  • Provided sample code: No
  • Provided link: Yes