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

Troubleshooting: Issues with Jquery's replaceWith function

I'm facing an issue with a table I have that includes a button in one of its columns. The button is supposed to toggle the class of the current row in the table and then replace itself once clicked. $(document).ready(function() { $(".checkOut"). ...

javascriptjqueryhtmlcss

Refresh the webpage source code for an AJAX request

When using AJAX calls on a page, I have noticed that the page source remains unchanged. This can be problematic if a user performs forward/backward operations in their browser, as the browser will display the original HTML code instead of the updated conte ...

javascripthtmlajaxreload

Standard tag for all JSP pages including doctype declaration and styles

I have multiple .jsp files and a page.tag that contains information about all the .jsp files. I don't want to include doctype, styles, and scripts in every single .jsp file, as it would require changing them individually if any updates are needed. Ins ...

htmljsp

Exploring HTML5 using QXmlQuery

Looking to execute XQueries on a batch of HTML5 documents using QT (currently at 5.8...) HTML/HTML5 documents, unlike XHTML/XHTML5, are not well-formed XML files. HTML introduces elements that XML parsers cannot handle off the bat (such as special characte ...

htmlxmlqtxpathqxmlquery

Searching for a post by content or title on Flask can be done by utilizing the search functionality built

I've created routes and forms, but when I tried to search, it showed "cannot be found." Here is my code: routes.py: @app.route('/search',methods=['GET','POST']) def posts_lists(): q = request.args.get('q') ...

pythonhtmlflask

PubNub's integration of WebRTC technology allows for seamless video streaming capabilities

I've been exploring the WebRTC sdk by PubNub and so far, everything has been smooth sailing. However, I'm facing a challenge when it comes to displaying video from a client on my screen. Following their documentation and tutorials, I have writte ...

javascripthtmlwebrtcpubnub

Getting the values of several labels using a class name - a comprehensive guide

Is there a way to retrieve the values of labels with the "timeAuction" class? I'm currently working on a JavaScript function that will target each label with the class name timeAuction and adjust its value. The number of labels with this class can va ...

javascriptjqueryhtml

Creating code for both the PC and mobile website by utilizing the user agent

I need to customize the CSS for my website, and I have a specific question: If a user is accessing my web page via a computer, the CSS should be as follows: <link rel="stylesheet" href="/pc.css" type="text/css" media="all" /> However, if they are ...

javascripthtml

Steer clear of including numerous variable values in Angular 2 while adjusting the class of selected items

Here's a question from someone who is new to Angular 2 and looking for an efficient way to change the active CSS class of tabs without using the router: activeTab: string; switchActiveTab(newTab: string) { this.activeTab = newTab; } <div clas ...

htmlangulartypescript

Centralized navigation bar

I am currently facing a challenge with centering my nav bar and I'm not sure how to proceed. The nav bar is placed within a class and a div, which is causing confusion for me. I have attempted to align it to the center and also tried using float:cente ...

htmlcss

What is the process for layering one image on top of another in HTML?

Don't miss checking out the amazing website wplayout.com. On the homepage, there is a stunning gallery that I want to enhance by adding a "premium" tag image on top of each picture. Currently, the premium image is displayed in the top right corner of ...

htmlcss

The Jquery css on my website is not functioning properly

After creating a website feature where clicking on a specific div triggers an onclick event processing a chat_generate function, I encountered some issues. This funciton should insert HTML for the chat into a designated .open_div based on the id generated ...

javascriptphpjqueryhtmlcss

Navigating a Bootstrap modal using arrow keys for scrolling - up and down

I attempted to address this issue by using the following code: // here, 'this' represents the modal $(this).focus(); Despite trying the above solution and even attempting to trigger a click event on it, I was unable to get it to work! UPDATE ...

javascripthtmltwitter-bootstraptwitter-bootstrap-3modal-dialog

Instructions on how to create a horizontal scrolling div using the mouse scroll wheel

I need help with scrolling a div horizontally using the mouse scroll button. My div does not have a vertical scroll and I would like users to be able to scroll horizontally. Can anyone provide guidance on how to achieve this? ...

javascripthtmlcss

Implementing dynamic CSS switching for right-to-left (RTL) support in a multilingual Next.js application

As I work on my multilanguage application with Next.js, I'm encountering a challenge in dynamically importing the RTL CSS file for Arabic language support. My aim is to seamlessly switch between RTL and LTR layouts based on the selected language. M ...

cssnext.jsi18nextdynamic-import

Is there a way to insert a button within a table that will allow me to easily insert new rows and columns?

<head> No content available at the moment. <!-- Here is my code --> <h1>Reserve Your Hall Form</h1> <form class="form-horizontal"> <table class="form-group table table-bordered table-hover"> ...

htmlasp.net-web-apiangular-ui-bootstrapbootstrap-4angular2-forms

Instructions for making a vertical line using HTML

Currently, I am working on a design for a card that is similar to this one. What I'm trying to figure out is how to add a vertical line right underneath the circle just like in the image. ...

htmlcssbootstrap-4

Guide to making a dropdown menu that pulls information from a text box and displays the location within the text

I'm currently working on a unique dropdown feature that functions like a regular text field, displaying the text position. To achieve this, I've constructed a hidden dropdown menu positioned beneath the text field. My goal is to develop a jQuery ...

javascriptjqueryhtmlcss

Enhance Your Search Input: Adding an Icon Before Placeholder Text in Material Design

I am currently facing an issue where the placeholder text is overlapping the icon in the code below. I need to have the placeholder text indented to the right of the icon. Is there a more efficient way to include both an icon and a placeholder text in a ...

htmlangularformsmaterial-designplaceholder

Separating Vue.js 2 - taking out the HTML snippet from a single file component and placing it in its own

I was pondering if there is a method to divide a Single File Components file into smaller segments. What do I mean by this? Let's take a look: <template> ... </template> <script> export default { name: 'my-component&a ...

htmlvue.jsvuejs2vue-componentcode-separation