Creating a CSS dropdown menu - Placing a before element in front of the select/option element

How can I position a CSS :before element in front of the foreground content? I am trying to move the text behind the gray area where the dropdown arrow is located.

I have already attempted to set the z-index of the before element to 2 and the actual element to 1 but it did not seem to have any impact so far. The text keeps overlapping the select arrow of the dropdown menu, which doesn't look good to me.

My current idea is to place the before element on top of the select/option element of the dropdown menu so that the text goes behind the gray area. However, it appears that the z-index is being ignored for these pseudo-elements for some reason...

Can anyone provide some insight on this issue?

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

HTML:

<div role="button" type="button" data-toggle="dropdown" class="btn dropdown category-dropdown">
    <span>{{ category_objects.category }}</span>
</div>

Raw browser output:

<div role="button" type="button" data-toggle="dropdown" class="btn dropdown category-dropdown">
    <span><select name="category" id="id_category">
        <option value="d6f13bec-f855-453b-ad2f-a426a42bde06">Hello World 1232i</option>
    </select></span>
</div>

CSS:

.category-dropdown {
    z-index: 1;
}

.category-dropdown select {
    background-color: #FFFFFF;
    height: 31.5px;
    color: #424242;
    border: 0;
    margin: 0;
    width: 10vw;
    max-width: 200px;
    min-width: 125px;
    border-radius: 3px;
    text-indent: 3px;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.category-dropdown::before,
.category-dropdown::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.category-dropdown::after { /*  Custom dropdown arrow */
    content: "\25BC";
    font-size: .625em;
    line-height: 1;
    right: 20px;
    top: 20px;
    margin-top: -.5em;
}

.category-dropdown select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: '';
}

.category-dropdown::before {
    width: 1.5em;
    right: 9px;
    top: 6px;
    bottom: 5px;
    border-radius: 0 3px 3px 0;
    margin-right: 3px;
    position: absolute;
    z-index: 2;
}

.category-dropdown select[disabled] {
    color: rgba(0, 0, 0, .3);
}

.category-dropdown select[disabled]::after {
    color: rgba(0, 0, 0, .1);
}

.category-dropdown::before {
    background-color: rgba(0, 0, 0, .15);
}

.category-dropdown::after {
    color: rgba(0, 0, 0, .4);
}

All other CSS-related styles are inherited from bootstrap.

htmlcss

Answer №1

Unsure if this meets your needs. The text may appear above the arrow due to the background being given an opacity.

Could you please verify if this solves the issue? I have simply changed the background color for before to a different shade.

.category-dropdown {
    z-index: 1;
}

.category-dropdown select {
    background-color: #FFFFFF;
    height: 31.5px;
    padding-right: 1.6em;
    color: #424242;
    border: 0;
    margin: 0;
    width: 10vw;
    max-width: 200px;
    min-width: 125px;
    border-radius: 3px;
    text-indent: 3px;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.category-dropdown::before,
.category-dropdown::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.category-dropdown::after { /*  Custom dropdown arrow */
    content: "\25BC";
    font-size: .625em;
    line-height: 1;
    right: 20px;
    top: 20px;
    margin-top: -.5em;
}

.category-dropdown select {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: '';
}

.category-dropdown::before {
    width: 1.5em;
    right: 9px;
    top: 6px;
    bottom: 5px;
    border-radius: 0 3px 3px 0;
    margin-right: 3px;
    position: absolute;
    z-index: 2;
}

.category-dropdown select[disabled] {
    color: rgba(0, 0, 0, .3);
}

.category-dropdown select[disabled]::after {
    color: rgba(0, 0, 0, .1);
}

.category-dropdown::before {
    background-color: #D9D9D9;
}

.category-dropdown::after {
    color: rgba(0, 0, 0, .4);
    z-index: 9;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>
 <div role="button" type="button" data-toggle="dropdown" class="btn dropdown category-dropdown">
     <span><select name="category" id="id_category">
         <option value="d6f13bec-f855-453b-ad2f-a426a42bde06">Hello World 1232i</option>
     </select></span>
</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

substitute tags

Is there a way to change the tagName of a tag using jQuery? For example, if I have an HTML document and I want to replace all 'fieldset' with 'div'. Any suggestions would be appreciated! ...

jqueryhtmldomtagsreplace

Tips for locating a file within an input element in HTML using jQuery

I attempted to upload a file using jQuery's $.ajax call and formData. To add the file to the formData, I initially tried: var fd = new FormData(); fd.append($('#myFileInput)); However, this method failed. Next, I attempted: var fd = new Form ...

jqueryhtmlfile-io

Adjust the color of the input range slider using javascript

Is there a way to modify the color of my slider using <input type="range" id="input"> I attempted changing it with color, background-color, and bg-color but none seem to work... UPDATE: I am looking to alter it with javascript. Maybe something al ...

javascriptcsshtml

Ways to centrally position elements in a Bootstrap table

I came across this query and tried implementing the style mentioned, but unfortunately, my table items are not aligned vertically: https://i.sstatic.net/rMqSR.png This is how the HTML appears: .table > tbody > tr > td { vertical-align ...

htmlcsstwitter-bootstrapbootstrap-4

List containing ionic items that spans the full height

I am trying to create a full-height list in Ionic that will always have 3 items. I want to ensure that it displays as full screen on different screen sizes. I have attempted using height:100%, but have not had success. Here is an example of what I am tryin ...

cssangularjsionic-framework

Is there a way to determine if the browser window is currently in use?

The code I am currently working with looks like this: let focus; function setFocus() { focus = true; } function hideWindow() { focus = false; } window.onfocus = setFocus(); window.onblur = hideWindow(); The intention behind this code is to use it in the ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Utilize the power of jQuery's AJAX capabilities

Is it normal for a jQuery AJAX request to take between 1-2 seconds before receiving a response? Is there any way to minimize this delay? The response type is JSON and the HTML code is small. Thank you! ...

javascriptjqueryhtmlajaxjson

Angular js encountered an unexpected error: [$injector:modulerr] ngRoute

https://i.sstatic.net/PATMA.png In my Angular code, I encountered the error "angular is not defined". This code was written to test the routing concept in AngularJS. var app=angular.module('myApp',['ngRoute']) .config(function ($routeP ...

javascripthtmlangularjsangularjs-routing

Error message: "Angular.js encountered a typeError stating that V2.example is not a function"

Having recently started learning Angular.js, I came across a tutorial that was created about a year ago. In this tutorial, I am attempting to implement a search feature that takes user input and searches for it on Github.com. Below is the HTML code snippet ...

htmlangularjs

Challenges faced when utilizing AJAX within a PHP loop

I am currently using a PHP WHILE loop to showcase multiple products, each with its own unique id#. These products can be rated using a PHP AJAX JQUERY-based system. However, after a user rates a product and the AJAX response returns the value, it is curren ...

phpjqueryhtmlajaxwhile-loop

Interconnected dropdown selections for multiple dropdown menus

I have successfully implemented a jQuery function that populates the second dropdown options based on the selection of the first dropdown option. However, I am facing an issue with having multiple instances of this functionality in rows. When I change the ...

javascriptjqueryhtmldrop-down-menu

Exploring an unusual HTML structure using Python's Beautiful Soup and urllib for web scraping

While extracting data may not be a challenge, the real issue lies in locating it. My focus is on scraping football data from a website that presents statistics either for all years or for specific seasons. However, despite selecting a particular season, ...

javascripthtmlpython-3.xweb-scrapingbeautifulsoup

Leveraging jQuery.css for retrieving values in Internet Explorer

I need to assign a variable to the value of the border-color property of my div errorChartColorError = $('.col__item.error').css('border-color'); Although this code works fine in Chrome, Internet Explorer 11 returns it as undefined W ...

jquerycssinternet-explorerinternet-explorer-11

Actions for HTML form submission to API through proxy link

Currently, the form is functioning properly with this setup <form method="POST" action='http://localhost:3000/newRecord'> However, my goal is to simplify the action attribute to just be action='/newRecord'. In React, I achieve ...

javascripthtmlnode.jsapiexpress

TranslateY animation glitching

I need help with expanding a box to 100% height after click, then collapsing and sticking to the bottom. I created a function in Vue framework to handle the animation, but it's not working smoothly. How can I make it less buggy? Check out the demo her ...

javascriptcssvue.js

Manipulating CSS styles with jQuery

Trying to update the UL image in the CSS directory using jQuery for a Twitter stream: as tweets are displayed, want to change the avatar of the account associated with each post. Using .css is straightforward, but struggling to modify the URL for the new i ...

javascriptjqueryhtmlcsstwitter

Issue arising from CSS and div elements

I am facing some challenges in making certain divs behave as desired. Take a look at the following references: Link 1: - contains two divs Link 2: - has only one div I am trying to utilize two divs (.content) without them being positioned incorrectly ...

csshtml

Creating a Timeless Banner with the Magic of `background:url()`

I have a banner placed within a div tag that displays my banner image. I am trying to create a fading effect when transitioning to the next image, but I am struggling to achieve this. I attempted to use jQuery fadeIn(), however, it did not work as expected ...

javascriptjquerycss

JavaScript: Controlling the ability to enter text based on the chosen option from a drop-down menu

After struggling to make my code work, I decided to create a piece of JavaScript to disable a text input when "Cash" payment is selected from the dropdown menu. On the contrary, I aimed to enable the text input if "Credit Card" payment was chosen. Unfortun ...

javascriptjqueryhtml

How can I iterate over an array in JavaScript to create posts for an HTML feed using Bootstrap?

I have created a simple Bootstrap website in HTML that resembles a news feed. To populate the feed with various posts, I am using Javascript to work with arrays containing images, headlines, and captions for each post. My initial approach involves looping ...

javascripthtmlbootstrap-4feed