Using inline SVG as a background in a select element with Firefox for custom styling

I've been working on creating a customized select tag with an inline SVG background using -webkit-appearance: none in my CSS.

For reference, here is the JSFiddle link: http://jsfiddle.net/sucrenoir/yHR53/5/

select {
    font-size: 30px;
    border: 1px solid lightblue;
    border-radius: 10px;
    color: black;
    padding: 12px;
    width: 300px;
    -webkit-appearance: none;

    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>") right no-repeat;

    background-color: lightblue;
    background-transparency: 0.5;
    background-position: right 15px top 22px;
    background-size: 18px 18px;
}

Unfortunately, this setup doesn't work in Firefox. Does anyone know what the equivalent of -webkit-appearance: none is in Firefox to make it function properly?

Thanks for your help!

cssfirefoxsvgwebkit

Answer №1

Regrettably, the current answer is negative.

Based on information from MDN documentation, it is advised to refrain from using it due to existing bugs.

Answer №2

To ensure proper functionality in Firefox, it is recommended to implement the -moz-appearance: none; property.

Answer №3

One alternative method involves the following code:

@-moz-document url-prefix() {
    select {
        background: lightblue; 
    }
}

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

Modify the appearance of a nested div using CSS hover on the main JSX container

Within the material-ui table component, I am dynamically mapping rows and columns. The className is set to clickableRow. The TableRow also includes a hover options div on the right side: const generateTableHoverOptions = () => { if (selected) { ...

javascripthtmlcssmaterial-uijsx

Items in a CSS masonry container with a 'column count' feature showcasing drop shadows that elegantly span across multiple lines

I've been experimenting with CSS column count to create a masonry effect for my items. Everything was going smoothly until I added a subtle drop shadow to the items. Upon closer inspection in the jsfiddle link provided, you'll notice that the dr ...

cssdatagridtwitter-bootstrap-3

What is the best way to create a self-referencing <div> in HTML?

After extensive research, I turn to seeking advice and guidance on Stack Exchange. I have a seemingly straightforward goal in mind. I want to create a <div> id/class that will automatically generate a link to itself using scripting of some sort. Be ...

javascriptphphtmlcss

What is causing the resistance in changing the color of my current navigation items?

I've encountered a small challenge with my header section. Despite multiple attempts, I'm struggling to change the color of the 'current' menu item. It seems that overriding Bootstrap's default color is proving to be more difficult ...

htmlcsstwitter-bootstrap

Assign a new class to the anchor tag that has a distinct ID named "link"

I want to add the CSS class "active" to the anchor tag that contains the ID currently active in the URL. Here's what I've tried, but I'm unable to get window.location.hash to function properly. $( "a[href=' + window.location.hash + &ap ...

jquerycssclassaddition

Custom AG Grid PCF Control - Styling without the need for a separate CSS loader

Struggling to implement AG Grid in a PCF control because CSS loaders are not supported. Are there any alternatives for adding CSS without using CSS loaders? Thanks. Source - "‎06-22-2020 11:38 AM Ah I see - the only supported way of including CSS ...

csswebpackag-gridpowerapps

The div with a 'inline-block' display and maximum width appears to be wider than needed after a line break

The red div labeled as inline-block-1 in the jsFiddle takes up more space than needed for the text. Is there a way to eliminate the extra space, making it resemble the green inline-block-2 without removing the max-width and avoiding hard-coding width? Feel ...

jqueryhtmlcss

Alignment of columns within an HTML grid

I can't seem to figure out why my grid column headers are not aligning properly with the data in the grid. It's puzzling that they have the same CSS class but different sizes. Can someone please help me with this: .outer { width: 60%; heig ...

htmlcss

What is the process of editing a webpage to affect the display on a different webpage?

I am currently working on creating two webpages. One will serve as a customization page where users can upload images and input text, which will then be displayed on another page. I am wondering if it is possible to achieve this functionality using CSS and ...

javascripthtmlcss

Emails cannot display CSS styles

I'm experiencing a problem with my email messages not reading the CSS styles, regardless of whether I use inline CSS or not. I have tried everything but still can't figure out the issue. Can anyone assist me? $firstname = $row['firstname&ap ...

phphtmlcssemail

Stop the border from curving along with the container's border radius

Currently, I am working on a tabs component that features a container with border radius. When a tab item is selected, it should display a bottom border. However, I'm facing an issue where the border curves along with the border radius instead of rem ...

htmlcssborderborder-radius

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Is there a way to retrieve all removed nodes from the DOM that have specific classes using CSS selectors? Below is an example of how it can be done with some complexity, but is there a simpler and more general approach? new MutationObserver(mut =& ...

javascripthtmlcssmutation-observers

What is the best way to reposition an element to the end of its flexbox container?

I have a flexbox-container that contains multiple details-elements with flex-wrap behavior. My goal is to have a details-element move below the other elements within the container when it is opened. For example, I want it to go from this initial layout: ...

javascripthtmlcssflexboxhtml-tag-details

Creating a SVG polygon using an array of points in JavaScript

Consider the following array containing points: arr = [ [ 0,0 ], [ 50,50 ], [ 25,25 ], ]; I would like to create an SVG polygon using this array. Initially, I thought the code below would work, but it doesn't: <polygo ...

javascriptarrayshtmlsvg

Ways to style a div element in CSS to achieve a unique shape

Hello there! I'm looking to achieve a tilted background div effect. Anyone have any tips or ideas on how I can do this? I'm new to web development and would appreciate the guidance. https://i.stack.imgur.com/wyj1X.png ...

javascripthtmlcssreactjs

Changing the jQuery mobile side panel from push to overlay can be achieved by modifying the display settings when transitioning from a mobile view to a

I'm currently working on a project using jQuery Mobile (JQM) and jquery.mobile-1.4.5. My goal is to create a responsive side menu panel with a fixed header that works well on both mobile and tablet devices. For the design, I want the panel width to b ...

htmljquerycssjquery-mobileresponsive

substituting symbols with colorful divs

I'm looking to add some color to my text using specific symbols. (), ||, and ++ are the symbols I'm using. If a text is enclosed in | symbols, it will appear in blue, and so on... Here is the code in action: const text = "|Working on the| i ...

javascripthtmlcss

Is it possible for links to remain clickable even if they pass underneath a div

I have implemented a shadow using a div element to cover some content beneath it. However, I am facing an issue where the div that is under the shadow cannot be interacted with. Is there any solution to this problem? Thank you ...

javascriptjquerycsshtml

Transmitting an lxml element tree as an SVG in a Response

Currently, I am attempting to read an SVG file within an `etree`. tree = etree.parse(open(svgFilePath, 'r')) Following this step, I proceed with some manipulations on the `tree`. My objective now is to send it back as an SVG whenever a user subm ...

pythonflasksvglxml

How about this: "Designing a Pop-Up Window

Currently working on my own customized modal, here's the unique CSS I came up with: .custom-modal{ position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter:alpha(o ...

htmlcssless