Is there a way to adjust the opacity of a dropdown menu as I choose different options?

I encountered a situation where I have a compact box displaying a dropdown menu. While navigating through different options in the dropdown, a green box appears with the message "Press enter to select," obscuring the content underneath.

How can I adjust it so that the hidden content becomes visible? Here is a screenshot for reference: https://i.sstatic.net/ewbM5.png

I identified the CSS class responsible for this behavior:

multiselect__option multiselect__option--highlight

These are its CSS properties. Is there a way to modify them to make it transparent? I attempted changing the green color to a light yellow or pale shade, but it did not yield the desired result.

.multiselect__option--highlight {
    background: #41b883;
    outline: none;
    color: #fff;
}

Update: Following the guidance provided below, here is how the revised version looks like,

https://i.sstatic.net/RPNFO.png

csslaravelvue.jsmulti-select

Answer №1

To create a background with opacity, use the following code snippet:

.multiselect__option--highlight {
    background: rgba(65, 184, 132, .3);
    outline: none;
    color: #fff;
}

If you also want to apply opacity to the text "Please enter to select", you can achieve it with this code:

.multiselect__option--highlight {
    background: #41b883;
    outline: none;
    color: #fff;
    opacity: .3;
}

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

The slides on my Bootstrap carousel are failing to display

I attempted to study a Bootstrap carousel code for better understanding, but unfortunately, the slides are not functioning correctly. The first slide remains static without any movement. Any suggestions on how to resolve this issue? Below are the HTML and ...

htmlcsstwitter-bootstrapbootstrap-4

The background image is not displaying

I am having trouble getting my background image to show up on my webpage. I have included a link to a screenshot of my image directory below for reference: image directorydirectory /*Moto G4, Galaxy S5*/ @media only screen and (min-width: 360px) { * { ...

css

Troubleshooting issues with jQuery background-position animation and CSS sprites functionality

Trying to add animation to my navigation links background using a Css sprite. Check out the picture here: $(document).ready(function(){ $('nav a') // Move the background on hover .mouseover(function(){ $(this).stop().animate({ba ...

jqueryhtmlcsscss-spritesbackground-position

Type definition for Vuex store functionality

Working on creating a versatile type to provide typing hints for mutations in Vuex. After reading an inspiring article on Vuex + TypeScript, I decided to develop something more generic. Here is what I came up with: export type MutationType<S, P, K exten ...

typescriptvue.jstypesvuex

Unable to get `tr:nth-child` to function properly within an MVC view

I have come across many questions regarding my issue, but none seem to offer a solution that works for me. The problem lies with the styling in the upper section of my view (which I plan to transfer to bootstrap later on). My main objective is to implement ...

cssasp.net-mvcrazor

Is there any specific reason not to use a short HTML/CSS syntax like <div a b c></div>?

When it comes to writing HTML in less standard environments, such as a phonegap app where strict syntax and semantics are not crucial, I have developed a unique approach that works for me. I aim to keep my HTML code short and concise by using the followin ...

javascriptcsshtml

Tips for resetting the form input fields in Vue.js after the user has successfully submitted the form

I am facing an issue with my registration page. After the user enters some values and successfully submits the form, I want to clear all the fields. To achieve this, I am using a predefined function called reset() inside the script section. However, the ...

javascripthtmlcssvue.js

Placing an item from a "stack" onto a separate line on smaller screens

My goal in Bootstrap is to achieve the design shown in this image: https://i.stack.imgur.com/9Eoen.png The first layout can be achieved by placing B and C within the same div container. The second layout can be accomplished by defining C on a new row ind ...

htmlcsstwitter-bootstrap

Update the CAPTCHA, while also refreshing the entire registration form

JavaScript Snippet <script language="javascript" type="text/javascript"> function updateCaptcha() { $("#captchaimage").attr('src','new_captcha_image.php'); } </script> New Image Code <img src="new_ ...

javascriptphphtmlcss

Determine if translation is available with VueI18n

How can I verify the presence of a translation? <p v-if="$t('some_key')">{{ $t('some_key') }}</p> In situations where there is no translation available, it will display 'some_key'. Is there a method to ...

vue.jsinternationalizationvue-i18n

Tips for displaying subtotal in a Vue application using Firebase Realtime Database

I am currently troubleshooting a method in my Vue app that is designed to calculate the total value of all items sold. Despite seeing the correct values in both the database and console log, the calculation seems to be incorrect. Could there be an issue wi ...

javascriptvue.jsfirebase-realtime-databasevuejs3

What is the best way to manage a hover effect on devices such as iPads?

As a beginner in web development, I am currently facing a challenge when it comes to managing hover effects on devices like iPads. Initially, my solution was to remove the CSS for hover and replace it with click events, but my client prefers to keep the ho ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to access the edit component from a different file?

I have a project where I need to create a form for car owners to manage their purchases and other operations. The form includes a table with multiple columns, one of which is an Action column that contains an Edit button. When this Edit button is clicked, ...

vue.jsvuetify.js

Troubleshooting peerDependencies issue in Laravel 9 while installing ReactJS and VueJS with laravel/ui

I added Laravel/Ui to a Fresh Laravel 9 installation for setting up ReactJs I followed these commands step by step in the command line interface: composer require laravel/ui php artisan ui react npm install After running the npm install command, I en ...

reactjsvue.jsnpmlaravel-9laravel-ui

What steps do I need to take in order to include a fresh border radius specification?

It seems that the rounded classes are created using specific SASS variables. $rounded: ( 0: 0, 'sm': $border-radius-root / 2, null: $border-radius-root, 'lg': $border-radius-root * 2, 'xl': $border-radius-root * 6, ...

vue.jssassvuejs3vuetify.jsvuetifyjs3

Adjusting Text Size Depending on Width

I recently used an online converter to transform a PDF into HTML. Check out the result here: http://www.example.com/pdf-to-html-converted-file The conversion did a decent job, but I'm wondering if it's feasible to have the content scale to 100% ...

javascripthtmlcssfont-size

Discovering the original value of props in Vue 3 using the Composition API

I am facing an issue with my component where it receives props and emits a custom event. I want the emitted value to be the same as the prop value, but I keep getting a Proxy object instead of the original value. Below is a simplified version of my code: ...

vue.jsvue-composition-apivue-propsvue-reactivity

Styling background images with jQuery

Issue with Implementing jQuery Background Image Swapper and CSS Styling html { background: url(images/image_1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; b ...

javascriptjqueryhtmlcss

Adjust positioning of navigation when hovered over

Need help creating a cool navigation effect like this. Live example: https://hookandbarrelrestaurant.com/ Here is my code: https://codepen.io/Dhaval182/pen/rQPMoW ...

javascriptjqueryhtmlcss

After checking the checkbox to add a class, I then need to remove that class without having to interact with the entire document

When I click on a checkbox, an animation is added to a div. However, I am struggling to remove this animation unless I click elsewhere on the document. The goal is for the checkbox to both add and remove the class. JS $('#inOrder').click(functi ...

javascripthtmljquerycss