`The Dropdown Component in TailwindCSS/daisyUI Does Not Adhere to Color Customization`

Currently, I am utilizing TailwindCSS and daisyUI to construct a dropdown menu. The code for it can be found below.

The issue that I am facing is when a dropdown menu item is selected (activated), it turns purple, despite applying the utility class bg-white on the <li> element. Is there a way to customize the color of the dropdown menu items upon click? Ideally, I am looking for a CSS-only solution since I am using the CDN versions of Tailwind and daisyUI and do not have access to modify tailwind.config.js.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97f3f6fee4eee2fed7a5b9a6a2b9a4">[email protected]</a>/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dbafbab2b7acb2b5bfb8a8a89be9f5e9">[email protected]</a>/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<div class="dropdown dropdown-hover">
  <a class="mx-2 text-2xl">ABOUT</a>
  <ul class="dropdown-content menu bg-blue-primary items-center">
    <li class="bg-white"><a>Item 1</a></li>
    <li class="bg-white"><a>Item 2</a></li>
  </ul>
</div>

htmlcsstailwind-cssdaisyui

Answer №1

After attempting to include active:bg-white in the <a> tags that were responsible for changing the background color, I realized that DaisyUI was overriding it.

Since I couldn't modify the configuration directly, I decided to incorporate the style override within a <style> block.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f195909882888498b1c3dfc0c4dfc2">[email protected]</a>/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2c584d45405b4542484f5f5f6c1e021e">[email protected]</a>/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<style>
.menu :where(li:not(.menu-title):not(:empty))>:where(:not(ul):active) {
  background-color: white !important;
  color: black;
}
</style>
<div class="dropdown dropdown-hover">
  <a class="mx-2 text-2xl">ABOUT</a>
  <ul class="dropdown-content menu bg-blue-primary items-center">
    <li><a>Item 1</a></li>
    <li><a>Item 2</a></li>
  </ul>
</div>

Answer №2

The color was updated to pink-200.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e5e0e8f2f8f4e8c1b3afb0b4afb2">[email protected]</a>/dist/full.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="691d0800051e00070d0a1a1a295b475b">[email protected]</a>/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
<div class="dropdown dropdown-hover">
  <a class="mx-2 text-2xl">ABOUT</a>
  <ul class="dropdown-content menu bg-blue-primary items-center">
    <li class="bg-white"><a class=" hover:bg-pink-200 focus:bg-pink-200">Item 1</a></li>
    <li class="bg-white"><a class="hover:bg-pink-200 focus:bg-pink-200">Item 2</a></li>
  </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: SyntaxError - Unexpected token 'if' found. Additionally, ReferenceError - berechnung is not defined

I keep encountering two error messages and I'm not sure where the issue lies: Uncaught SyntaxError: Unexpected token 'if' Uncaught ReferenceError: berechnung is not defined Any idea what might be causing this problem? I've reviewed t ...

javascripthtml

Exploring array data retrieval in Angular

I need to display various inch sizes for different bike models. I have a json file containing an array of bike data. [{ "name": "Mountainbike", "img_url": "assets/img/mountainbike.jpg", "mount_size": [{&quo ...

htmljsonangular

On screens with smaller dimensions, the divs intersect with each other

I have a project where I need to style each letter in its own box, arranged next to each other or in multiple rows with spacing between them. Everything looks great until I resize the screen to a smaller size or check it on mobile - then the letters in the ...

htmlcssruby-on-railsmargin

Using Javascript, dynamically animate the text in the hero unit with fading in and out effects

I currently have a "Hero" unit with the following code: <div class="hero-unit"> <div class="container"> <h1>Dapibus Euismod Mollis</h1> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis ...

javascriptjqueryhtmltwitter-bootstrap

Shorten a data point in JSON code

I'm currently in the process of developing a stock widget that utilizes JSON to retrieve data from the Yahoo API/YQL console. I am specifically working with values extracted from the key ChangePercentRealtime, however, the values are longer than what ...

javascriptjqueryhtmljson

Tips on how to maintain the value of an integer variable even after clicking a submit button, enabling its reuse on the same page

Take a look at the first part of this code where we are using the variable $Tno. if(isset($_POST['submit'])) { $Tno=$_POST['Tno']; $query="SELECT * FROM docs WHERE Tno='$Tno'"; $result=mysql_query($query) or di ...

phphtmlmysqlpdf

Images for navigating forward and backward in a jQuery datepicker

I'm experimenting with setting custom images for the previous and next month buttons. I attempted to utilize the prevText / nextText options of the datepicker in order to include a span with my own CSS class definition. However, this resulted in the c ...

jquerycssjquery-uidatepicker

I'm looking to adjust the padding on the left and right sides of the v-select menu checkbox in Vuetify 3. How

While trying to reduce the left padding of the v-select menu checkbox using the F12 debugger, I encountered an issue where the menu suddenly disappears when clicked. This makes it difficult to see the active menu. Attached is a screenshot of the select me ...

cssvue.jsdrop-down-menuvuetify.jsdropdown

Semantic UI (React): Transforming vertical menu into horizontal layout for mobile responsiveness

I have implemented a vertical menu using Semantic UI React. Here is the structure of my menu: <Grid> <Grid.Column mobile={16} tablet={5} computer={5}> <div className='ui secondary pointing menu vertical compact inherit&apos ...

javascriptcssreactjssemantic-uisemantic-ui-react

Certain Bootstrap 5 icons are failing to appear on the screen

I'm encountering an issue with Bootstrap 5 where certain icons are not displaying correctly. The bi-search icon shows up perfectly, but the bi-send icon is not being shown at all. I would usually include this in a code snippet, but it seems that featu ...

htmliconsbootstrap-5

Creating a text input with a CSS gradient

Can the text color of an input be set as a gradient? I came across this method for regular static text but it doesn't seem to work for inputs: h1 { font-size: 72px; background: -webkit-linear-gradient(to right, rgb(66, 251, 227), rgb(43, 43, 2 ...

htmlcss

Is there a way to validate form elements in HTML prior to submitting the form?

In my form, I am utilizing PHP for validation and processing, but I am interested in verifying elements as they are being filled out. Is there a way to check the current value of an element before the form is submitted? ...

javascripthtmlvalidation

The dropdown menu failed to display properly as intended

I'm encountering an issue with the CSS for my menu. Here is a screenshot of the dropdown menu: Whenever I hover over the submenu, it drops down along with the parent menu container. Please take a look and let me know what might be causing this probl ...

htmlcss

Example using three.js showing issues with external resources failing to load on jsfiddle.net

Currently, I am endeavoring to make progress with this sample project: github.com/josdirksen/learning-threejs/blob/master/chapter-09/07-first-person-camera.html I have made attempts at replicating the code on my personal pages.github.io account and also m ...

javascripthtmldomthree.js

Angular Bootstrap causes misalignment of table column headings based on different properties in object

I have an object with two properties: person and vehicle. Both properties consist of arrays of data. I have separate column headings for the person and vehicle properties and display the data in tabular form. However, the column headings for both propertie ...

htmlcssangulartypescriptsass

Ways to stop cascading CSS attributes to child elements?

I am in the process of creating three tables. <table id="first"> <tr> <td> 1. CAPTION </td> </tr> <tr> <td> <table id="second"> <tr& ...

css

Unable to retrieve the "value" attribute from the DOM element of the plus/minus box

Looking to retrieve the "value" attribute from the selection box that allows users to choose the quantity of a specific item on my website. As a beginner in both Javascript and HTML, I noticed the attribute when inspecting the element: <input size="2" ...

javascriptjqueryhtmldomgoogle-tag-manager

Is it possible to incorporate a <div> element within a PHP code?

After successfully writing some PHP/SQL code, I encountered an issue when trying to create a new div called "content" along with applying a CSS class. The recommended approach was suggested as follows: $mydiv = '<div name="content">'; $myn ...

phphtmlinclude

Having issue with jQuery popup not functioning correctly on the right side with the contact form. Is there anyone who knows how

Looking for a side slide popup that only accepts paragraph content? Want to add a contact form to it? Check out this fiddle - link here For a working example, visit - $(function() { // Slide from right to left $('#test2').PopupLayer({ ...

javascriptjqueryhtmlcss

What's the best way to fill in content for textarea and radio buttons?

I retrieved data from a database and stored it in the variable $tableRe. Now, I need to display these values in a textarea and also check the radio button. Below is my code snippet: $sql = "select (address, gender) from stud table"; if($result=mysqli_que ...

phpjqueryhtmlmysql