Having trouble getting custom select to work with CSS in Firefox?

I want to customize the button (down arrow) located in the right corner of the select box. The HTML code is as follows:

<div class="buscaSelect">
    <select name="oper">
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
    </select>
</div>

This is the corresponding CSS:

.buscaSelect {
    display: inline-block;
    margin: 18px 0px 0px 0px;
    width: 120px;
    height: 27px;
    border-radius: 0px;
    overflow: hidden;
    background: white url("btnSelect.png") no-repeat right center;
}

.buscaSelect select {
    padding: 4px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

While Safari works perfectly by replacing the default button with "btnSelect.png", Firefox shows the default button on top of my custom one, resulting in a flawed appearance due to size discrepancies between the two buttons.

Is there a way to disable the default Firefox button and only display mine?

htmlcssfirefox

Answer №1

Here is the solution you're looking for. I've provided a comparison of both dropdown styles - one with an arrow and one without, displayed side by side. The CSS property webkit-appearance:none works well with Firefox and Chrome, but for Internet Explorer, you may need to add the following:

select::-ms-expand {
    display: none;
}


.buscaSelect {
    display: inline-block;
    margin: 18px 0px 0px 0px;
    width: 120px;
    height: 27px;
    border-radius: 0px;
    overflow: hidden;
    background: white url("btnSelect.png") no-repeat right center;
}

.buscaSelect select {
    padding: 4px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

#noarrow {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
}
select::-ms-expand {
    display: none;
}
<div class="buscaSelect">
    <select name="oper" id="noarrow">
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
    </select>
</div>
<div class="buscaSelect">
    <select name="oper">
        <option value="value1">Value 1</option>
        <option value="value2">Value 2</option>
    </select>
</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

Automatic popup updates when submitting a form in a Chrome extension

Looking to develop a chrome extension popup window that, when clicked, will present a form for users to input their name and college. The goal is to save this data in chrome storage and then replace the popup with a new window displaying a greeting message ...

javascripthtmlformsgoogle-chrome-extensionpopup

Retrieving an HTML element that has been added through DOM manipulation

After successfully creating a Jquery function that inserts a 'save button' into the page when a specific button is clicked, I encountered an issue with another function meant to be activated when the save button is clicked. The first function see ...

javascriptjqueryhtmldom-manipulation

Is there a way to trigger a click event on an href using asp code behind?

Is there a way to programmatically trigger a click event on the href "shipping_question_ID_product_received_as_ordered_link" from the code behind of an ASP form? This href triggers a complex function in jquery when clicked by the user. I need to simulate ...

c#jqueryhtmlasp.net.net

How can I combine an onkeypress and onclick event listener in one method?

I have two inquiries, somewhat intertwined. 1) Is it feasible to merge the 2 functions below into a more efficient function, or do I need to create a function and then call it in both event listeners? input.addEventListener("keyup", () => { if (eve ...

javascripthtmladdeventlistener

Pass data back and forth between app.js (node) and javascript (main.js)

I am facing a challenge in sending and retrieving data (username) between app.js and main.js. In my setup, I have a node app.js that calls index.html which then triggers the main.js function called "clicked". Below is the code snippets for each file: app. ...

javascripthtmlnode.js

Choosing a Radio Button with a Labeled Option

I'm experimenting with a method to style radio buttons by concealing them and inserting an alternative image as the background of the corresponding label (similar to this technique). In my test, I attempted to apply CSS to the radio button label: inp ...

htmlruby-on-railscssradio-button

The ability to choose only one option in a checkbox within a grid view column

In my grid view, I have a checkbox in the last column. I am trying to ensure that only one row can be selected at a time. <tr *ngFor="let permit of PermitDetails" (click)="GoByClick(permit)"> <td style="text-align: center">{{permit.TVA_BAT ...

htmlangular

using outlines for FontAwesome icons in React Native

I am struggling to use the fontAwesome + icon in the middle of a circle as one item. I have tried placing it inside a circle icon, but it doesn't seem to work properly. import IconFA from 'react-native-vector-icons/FontAwesome'; < ...

javascriptcssreactjstypescriptreact-native

Troubleshooting Bootstrap's Height Problem

After extensively searching this forum, I couldn't find a solution to my bootstrap issue. Here's the code for two forms on my page: <div class="row justify-content-md-center"> <div class="col-sm-6"> <f ...

htmlcss

Having trouble getting my absolute div to center?

Check out this problem on my server at THIS LINK .login-div{ background: #fff none repeat scroll 0 0; height: 500px; left: 50%; width: 500px; right: 0; z-index: 99999; top: 20%; position: ...

htmlcss

Adding a Video as a Background Button Using HTML and CSS

My attempt to utilize background-image in CSS for the button background was unsuccessful as it only supports images, not videos. Is there a way to set a video as the background of a button? My goal is to create a button with a continuously looped muted v ...

htmlcss

Is there a way to attach an event for multiple arithmetic operations to a checkbox?

My form includes 4 checkboxes for different mathematical operations. <form action="" method="POST"> Select number of questions: <input type="number" name="que" value="que"> <br> <br> Select number of series: <select name="sel ...

javascriptphpjqueryhtml

An Overview of Node.js Application Structure

Guten Tag! My name is Alex, and I am from Germany. I apologize for any mistakes in my English as it is not my first language. I have recently started learning programming with Node.js after creating some simple static HTML and CSS websites. As a beginner, ...

htmlnode.jstwitter-bootstrapexpress

Having a slight hiccup with pixel alignment and browser compatibility in my jQuery animation

To emphasize a specific paragraph element, I developed a JavaScript function that displays it above a darkened background. My approach involved using jQuery to generate an overlay and then duplicating the targeted paragraph element while positioning it ab ...

javascriptjquerycssxhtml

CSS - Utilizing Flexbox for creating inline lists that adjust based on text length

I have a set of radio buttons arranged like this: I want to utilize flexbox to display them horizontally when there is sufficient space, similar to this: However, the current setup uses a min-width media query for layout breaking, which can lead to text ...

htmlcssflexbox

Dynamically insert innerHTML content into table rows using JavaScript in PHP is a fantastic way to customize

Having trouble with innerHTML in this scenario, looking to achieve something along these lines: <table width="100%" border="0" id="table2"> <?php include("connection.php"); $sql=mysql_query("select* from b1"); while($res=mys ...

javascriptphphtmldominnerhtml

Guide to make a loading animation button through the use of HTML, CSS, and JavaScript

"Hello, I am currently in the process of working on a project and am interested in implementing a button with a loading animation that can be displayed during actions like form submission or content loading. I'm seeking some advice or code sample ...

htmlformsbuttoninputlabel

Certain content appears oversized on Android devices, yet appears appropriately sized on desktop computers

I am experiencing an issue with a webpage where the text appears normal on desktop but is too big on Android devices. Below is the code snippet causing the problem: <!DOCTYPE html> <html> <head> <title>ra ...

androidhtmlcsstext

Place a "sticky" button directly below a second "sticky" navigation bar

Within my app file, I have customized components like an appbar and various page elements: const styles = theme => ({ appBar: { width:'100%', }, }); class App extends Component { render() { const {classes} = this.props; ...

cssreactjsmaterial-ui

Two interdependent select fields

I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...

javascriptjqueryhtmlcssselect