Stop my ::after element from interfering with my select dropdown menu

Check out this JSFiddle I created to showcase my issue: JSFiddle

I am currently working on a customized dropdown menu using an icomoon icon instead of a V. While the design looks great, the ::after pseudo-element for the parent container is causing issues with the select element.

<div class="select-style">
  <select>
    <option value="">...</option>
    <option value="1365">Some term</option>";
  </select>
</div>

CSS

.select-style {
  width: 240px;
  height: 26px;
  border: 0;
  padding: 0;
  margin: 0;
  position: relative;
  &::after {
    /*content: "\f107";
        font-family: "icomoon";*/
    content: "V";
    font-size: 18px;
    position: absolute;
    right: 7px;
    top: 0;
  }
}

select {
  width: 100%;
  height: 24px;
  border: 1px solid rgb(199, 199, 199);
  border-radius: 3px;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: "";
  &::-ms-expand {
    display: none;
  }
}

I explored the option of using JavaScript to open the dropdown but that did not solve the problem. I also experimented with z-index to see if it would help, but the icon kept getting hidden even though the select element had a transparent background.

Is there a way to ensure that the custom icon remains visible above the select element without obstructing its functionality?

htmlcssdrop-down-menu

Answer №1

Make sure to include position:relative and z-index:1 in the style of the select element

https://jsfiddle.net/37z8vokd/

select {
  ...
  position: relative;
  z-index: 1;
}

Answer №2

One interesting approach is to apply a z-index of -1 to the ::after pseudo-element.

.custom-select {
width: 240px;
height: 26px;
border: 0;
padding: 0;
margin: 0;
position: relative;
&::after {
/*content: "\f107";
    font-family: "icomoon";*/
content: "V";
font-size: 18px;
position: absolute;
right: 7px;
top: 0;
z-index: -1;
 }
}

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

What is the best way to integrate images into the Shopify source code?

Looking for assistance here. I've been working on my theme in vscode and added a new section that is very simple (just text and an icon). It's working perfectly fine in Shopify cli. But when I tried to implement it on my Live theme, the icons ar ...

htmlcssshopify

Unable to impose a restriction on the number input field limit

My input field has a type of "number" with the min and max attributes applied to limit user input. However, I am facing an issue where users can still enter values beyond the set limit. How can I prevent users from entering values above the specified lim ...

javascripthtmlangulartypescript

Highlight the parent name in the menu when I am on the corresponding child page

Here is a snippet of a recursive function: function recursive($arrays, $out) { if (is_array($arrays)){ //$out .= "<ul>"; foreach($arrays as $parent => $data) { //if parent is empty if ($parent === '') { ...

phpjquerycssrecursion

How come e.target.value always shows the most recent value?

Starting out in HTML and I have a question regarding input. Here is the HTML code I am working with: <input type="text" value="abc" onChange={(e) => { console.log(e.target.value); }}/> I am puzzled because even though the default v ...

htmldom-events

Retrieve the dynamically generated element ID produced by a for loop and refresh the corresponding div

I am facing a challenge with my HTML page where I generate div IDs using a for loop. I want to be able to reload a specific div based on its generated ID without having to refresh the entire page. Here is a snippet of my HTML code: {% for list in metrics ...

javascriptjqueryhtmlajax

Safari failing to show SVG at correct alignment

I am looking to implement a unique feature on my website where image placeholders are displayed for 1 second before fading out to reveal the actual image. These image containers will be responsive, adjusting to fit the size of their parent container. In a ...

cssgoogle-chromesvgsafari

Sophisticated filter - Conceal Ancestry

Check out this snippet of my HTML: <td> <a class="button" href="#"> <input id="download">...</input> </a> <a class="button" href="#"> <input id="downloadcsv">...</input> </a> </td> I am ...

javascriptcss

The issue of JQuery recursion not properly focusing on a textbox

Can anyone help with a jquery focus issue I'm experiencing? My goal is to address the placeholder problem in IE by focusing on an element and then blurring it to display the placeholder. This functionality is being used in a modal form. Initially, e ...

javascriptjqueryhtmlmodal-dialogfocus

Customizing number input types in Angular 2 - the perfect solution

Attempting to incorporate a time picker using HTML5 input type number in Angular2. The code snippet below illustrates the setup: <input type="number" [(ngModel)]="hour" (change)="checkHours();" name="one" min="1" max="12"> <input type="number" ...

angularhtmltypescriptangular5

Is it possible to adjust the position/target values of a webkit CSS transition without interrupting its operation

Is there a way to smoothly change the target position or attributes of a running transition without halting it? To illustrate, let's consider this initial animation: -webkit-transition:-webkit-transform 5s ease-in-out -webkit-transform: translate3d( ...

javascripthtmlcsswebkit

Vacant area on the right side of the page

There seems to be an issue with the website where there is an empty space to the right, causing a horizontal scroll bar to appear at the bottom. Despite my efforts, I cannot seem to identify the root cause of this problem. While one solution would be to si ...

htmlcsswordpress

I'm having difficulties with separators in CSS when I attempt to insert one

Hey there, I've encountered an issue with my separator: #menu li:not(:first-child):before { content: " | "; } Despite this code working, the first li item isn't being separated like the others. This is the current output I'm getting: t ...

css

How can I use CSS to make a child element in a grid layout stretch horizontally to full width?

I am currently working on designing a grid layout that will display a child element when clicked. Here is what I have in mind: [ link1 ] [ link2 ] [ link3 ] [ link4 ] [ link4 ] [ link4 ] When clicked, it will turn into: [ link1 ] [ link2 ] ...

cssflexboxcss-grid

Python Selenium: Cannot Click on Element - Button Tag Not Located

TL,DR: My Selenium Python script seems to be having trouble "clicking" on the necessary buttons. Context: Hello. I am working on automating the process of logging into a website, navigating through dropdown menus, and downloading a spreadsheet. Despite ...

javascriptpythonhtmlseleniumiframe

retrieve information provided by the user

When a user inputs a date into #dateUserInput and clicks the button, I want the fetch function to retrieve the appropriate image for that date. However, an error occurs: VM113:1 Uncaught (in promise) SyntaxError: Unexpected end of JSON input at getimag ...

javascripthtml

Guide on importing table information into an array using jQuery

I am facing an issue where I want to extract values from a dynamically generated table and then send those values in an AJAX call. The problem is that even though I am able to increase the number of rows in the table dynamically, when I try to capture the ...

javascriptjqueryhtmlajax

The Twitter widget is not staying in sync with the rest of the page when scrolling on

Twitter provides a widget that is widely used by many people. Below is the code provided by Twitter: <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', ...

htmlcssinternet-explorerscroll

Is there a way to adjust the padding temporarily?

Important Note: Despite the misleading title of my question, it doesn't accurately reflect my actual query (sort of). Below is the code snippet in question: .one{ background-color: gray; } .two{ padding: 20px; } <div class = "one"> < ...

javascriptjqueryhtmlcssuser-interface

Count of elements in one flexbox row

Having a flexbox container with multiple items in row-wrap format, is there a way to use JavaScript to determine the number of items in each row? Essentially, finding out at what point they wrap. For instance- <div class="container"> <div clas ...

javascriptcssflexbox

The grid expands to cover the entire width of the browser

Hello everyone, I am a newbie when it comes to JavaScript and CSS. I am in need of a code, whether it be JavaScript or CSS, that will allow me to stretch out a grid layout measuring 5 x 2 along with pictures to completely cover the width of the browser wi ...

javascripthtmlcssdrupal