Using CSS to remove the background of a dropdown button in a <select> element

I need to style a <select> element so that it appears like plain text until clicked, revealing the pulldown choices. Ideally, I would like to include small arrows to indicate multiple options, but I can add those as image overlays if necessary.

My problem lies with customizing this element using CSS:

#FromPopup {
            background: none; <--
            border: none;  <-----
            margin-left: 8px;
            position: relative;
            cursor: pointer;
            height: 5px;
            margin-top: -10px;
}

While this code successfully removes the background and border, the default pulldown button still shows up, resembling the Win Classic style.

Is there a way to hide the background and border of the pulldown button?

I am specifically targeting Mozilla platforms in this case only. Thank you!

htmlcsscustomizationmozillahtml-select

Answer №1

One solution is to typically use -moz-appearance:none, but there seems to be a bug with the arrow on select elements.

To learn more about this bug, check out the report here: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

Another workaround could involve wrapping an element around your select and using :after to place an element on top of it.

<div class="select-container">
    <select>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
        <option>This is some option</option>
    </select>
</div>

.select-container {
    display:inline-block;
    position:relative
}
.select-container:after {
    content:'';
    position:absolute;
    right:0;
    top:0;
    width:17px;
    height:100%;
    z-index:10;
    background-color:white;
}

Check out a demo of this workaround at http://jsfiddle.net/gaby/K8MJB/1/

Answer №2

Have you ever come across this:

How to get rid of the arrow in a select element on Firefox

It seems like your options are limited, but there are a couple of suggestions and solutions available. One workaround could be to hide the arrow using something like this:

select {
   overflow:hidden;
   width: 120%;
}

After that, you can customize it as needed.

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

"Customize your Vuetify v-card with uniquely styled rounded corners on only

I am seeking to create a unique v-card design where only two corners are rounded. Despite my attempts, the card ended up rotated by 90° and didn't achieve the desired outcome. DESIGN ATTEMPT: <div class="text-center rotate-ninety ml-n6" ...

cssvue.jsvuetify.js

beforeprinting() and afterprinting() function counterparts for non-IE browsers

Is there a way to send information back to my database when a user prints a specific webpage, without relying on browser-specific functions like onbeforeprint() and onafterprint()? I'm open to using any combination of technologies (PHP, MySQL, JavaScr ...

phpjavascriptmysqlhtmlonbeforeprint

Vertical Alignment of Navigation Bar in Bootstrap 4

I am trying to align the center of my navigation bar using the "Cover" Bootstrap 4 template. Please find the current code provided below. <div class="cover-container d-flex h-100 p-3 mx-auto flex-column"> <header class="masthead mb-auto"> ...

htmlcssbootstrap-4navbarcenter

Unable to switch between navigation items and icons

Currently, I am in the process of learning vanilla JavaScript and I'm trying to incorporate a navigation feature similar to when the hamburger icon is clicked. However, I have encountered an issue where I cannot toggle the hamburger icon to change it ...

javascripthtml

Looking for help with aligning an icon to the right side of my text

I'm struggling with aligning the icon to the right of the quantity. When I use float:right, it places the icon at the far right of the cell instead of next to the text. Is there a way to get it to be on the right side of the text but directly adjacent ...

htmlcssangularjsangular

Sort the data - a selection menu is included in each row of the table

My issue involves a datatable where each row must have a select item with multiple options to choose from. The goal is to filter the rows based on the selected option when using the default search bar located above the table. However, I've encountered ...

javascripthtmldatatablefiltering

Placing a JavaScript button directly below the content it interacts with

I am currently working on a button that expands a div and displays content upon clicking. I am facing an issue where I want the button to always be positioned at the bottom of the div, instead of at the top as it is now, but moving it within the parent div ...

javascriptjquerycss

How can I use PHP to update and select on the same page simultaneously?

Having always been able to do something similar in other languages, I'm facing a few difficulties with PHP. My goal is to load a page that displays all the values from a form (created with a SELECT) and then update them all when clicking a "CHANGE" bu ...

phphtmlmysqldatabaseweb

Different ways to swap table cells using only CSS

Does anyone know how to switch the positions of table cells using only CSS? I have three divs set up like this: #content { width: 1000px; display: table; float: none; vertical-align: top; border: 1px solid red; } #left { float: left; } #ri ...

htmlcsscss-tables

Instructions on utilizing the transpiled "main.js" file using gulp

As a novice in Angularjs 1.0, I encountered issues with my script and decided to use gulp to compile ec6 to ec5 by implementing the code provided below. The compilation process generated the file main.js. However, I am unsure about how to connect it when l ...

javascripthtmlangularjsasp.net-mvc-5gulp

Toggle button color on click by using ng-click on a different button

As a newcomer to Angular, I am facing an issue. I have two buttons - button1 and button2. What I want is that when I click on button1, its color changes from green to red. Then, when I click on button2, the color of button1 should revert back to green. How ...

javascripthtmlangularjs

What can I do to prevent my HTML/CSS/jQuery menu text from shifting when the submenu is opened?

After encountering numerous inquiries regarding the creation of disappearing and reappearing menus, I successfully devised a solution that functions seamlessly on desktop and tablet devices. My approach involved utilizing the jQuery .toggleClass function w ...

jqueryhtmlcssmenu

What steps should I take to ensure that clicking this button triggers the API request and returns the data in JSON format?

I'm attempting to have the button with id 'testp' return an api request in json format, however it seems to not be functioning properly. You can find the HTML code link here: https://github.com/atullu1234/REST-API-Developer-1/blob/main/js-bu ...

javascripthtmlcssapi

What steps can be taken to ensure that a box is the exact same size

Is it possible to make two of my main buttons the same size? I'm just starting out in web development and could use some guidance. Below is the HTML and CSS code I currently have for my index.html: <body> <div> <img src="img/projec ...

htmlcss

Tips for stopping an image from stretching the cell in flexbox using CSS

When using Flexbox to style elements, the width of the parent should be determined by the text inside child1. The image inside child2 should grow proportionately as the parent grows. However, it is important to ensure that the parent div does not exceed it ...

htmlcssflexboxgrid

Show User-Uploaded Image on Redirected Webpage with Flask and html

My goal is to develop a webpage where users can submit an image, and upon submission, they are redirected to a new page displaying the rendered image. I have referenced the code from How to pass uploaded image to template.html in Flask for guidance, but un ...

pythonhtmlformsflaskrequest

Is there a way to detect duplicate usernames in a form without actually submitting the form, and then automatically focus on the username field if a duplicate is

I need help with a user registration form that I am creating. I want the form to automatically search for an existing username as soon as the user starts typing in the username field. If the username already exists, I want the field to receive focus. In my ...

phpjavascriptajaxhtml

Is there a way to dynamically alter the heading color in Shopify liquid code?

After utilizing ChatGPT to review the code, I am uncertain if it is related to the color schemes. I am unsure of what I may be missing or doing incorrectly. While I can successfully alter the heading text, I am unable to change the color. Below is the code ...

htmlcssjsonshopifyliquid

Encountering an unusual hash code when implementing Google Tag Manager in a Next.js project was

I am currently using Next.js and have added Google Tag Manager through a script <script dangerouslySetInnerHTML={{ __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var ...

javascripthtmlreactjsnext.jsfrontend

Switching between dark and light mode in Ant Design

I have successfully implemented dark mode toggling in my application. However, when I try to switch back to light mode, the CSS does not seem to be reloading properly. Below is the code snippet: //ThemeContext.jsx const DarkTheme = lazy(() => import(". ...

cssreactjsantd