Personalized HTML Selection Arrow Graphic

I am seeking a solution to hide the default arrow of the HTML select list and instead add a custom image (arrow) to the list.

https://i.sstatic.net/HF7vO.png

.form-inline select {
            margin: 10px 35px 15px 0px;
            background-color: #fff;
            font-size: 30px;
            width: 80px;
            color: #000;
            background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png") center bottom no-repeat;
            cursor: pointer;
            display: block;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
            border: none !important;
            justify-content:center;
            align-items:center;
            text-align:center;
        }

These are my current styles. The arrow is not displaying as I intended. Any assistance is appreciated.

htmlcssstylesheet

Answer №1

It seems like you may be confusing the background and background-image CSS properties, which could be the reason why your styling isn't working as intended:

In a nutshell: (I've opted to use background in place of background-image)

background: salmon url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png") no-repeat center calc(100% - 2px);
background-size: 24px 24px;

However, for easier future modifications, I suggest the following approach:

background-color: #fff;
background-image: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-512.png");
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: center calc(100% - 2px);

Just so you're aware, this CSS snippet will hide the default browser arrow:

-webkit-appearance: none;
appearance: none;

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

Tips for choosing an item in a multi-select dropdown using Selenium WebDriver

Currently delving into Selenium WebDriver while utilizing Java.. I am curious about how to select values in a Multi-select box where the options are already pre-selected. If I want to choose two or more additional options, how can I go about it? The HTML ...

javahtmlseleniumselenium-webdriver

Tips for making Google search results include query strings in the returned links

I need help figuring out how to make Google search results show a URL containing a query string. Here's an example from the project I am currently working on: Instead of this link, Google search returns: If anyone has any suggestions for fixing this ...

javascriptphpcsssitemapgoogle-search-console

Why does Froala Editor not maintain formatting when retrieving data from the database?

I've been using the Froala editor to add content on my website, and it's doing well for inserting data into the database. However, I'm facing an issue when retrieving data from the database as it doesn't maintain the original formatting ...

javascripthtmlfroala

HTML5 for advanced positioning and layering of multiple canvases

I have 2 canvas layers stacked atop each other, but I need to position them relative to the entire page. The dimensions of both layers are fixed at a width of 800 and a height of 300. My goal is to center the canvas layers regardless of screen size, with ...

javascriptjqueryhtmlcanvasscreen-positioning

The proper functioning of border-collapse and empty-cells together is not achieved

Refer to the link provided: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Tables To conceal empty cells, use the rule empty-cells: hide;. This allows a cell's parent element background to shine through the cell if it is emp ...

htmlcss

Creating a responsive Select tag

Currently developing a responsive webpage using HTML5 and CSS3. Within the HTML is a form with a table that collapses as the page size decreases. However, encountering an issue where the select tag does not collapse alongside other elements in the form. Be ...

htmlcssresponsive-design

Tips for inserting a pin into a designated location on an image map

Within my angular application, I have implemented an image map using the HTML usemap feature. Here is the code snippet: <img src="../../assets/floor2.jpg" usemap="#floor2Map"> <map name="floor2Map"> <area shape="pol ...

htmlcssangulartagsimagemap

Enhance Bootstrap modals by automatically adjusting the background shadow mask when resizing or changing the content within the modal window

Incorporated within my bootstrap modal window is a form alongside a link that triggers the jQuery functionality of .slideToggle(). By interacting with this link, a concealed div expands. Consequently, the size of the modal popover becomes fluid. Upon click ...

javascriptjquerycssruby-on-railstwitter-bootstrap

"Struggling with setting the default checked state for single and multiple checkboxes? The ng-init method with checkboxModel.value=true seems to be ineffective – any suggestions

<input type="checkbox" ng-model="isChecked.value" ng-true-value="'yes'" ng-false-value="'no'" ng-click='handleCheckboxChange(isChecked.value, idx);' ng-init="isChecked.value=true" /> ...

javascripthtmljqueryangularjsangular

Formatting Anchor Tags Inside a Table Data Element

My existing CSS section is as follows: .leftMemberCol { width:125px; vertical-align:top; padding: 13px; border-width:0px; border-collapse:separate; border-spacing: 10px 10px; text-align:left; background-color:#f2f3ea; } I have a td section (a left sideb ...

css

Update the less mixin

I attempted to eliminate the border radius from all Bootstrap elements by creating a custom-mixins.less file with the following lines in it. My intention was for these lines to overwrite the original .border-radius mixin, but unfortunately, it did not work ...

csslessmixins

Tips for aligning two objects side by side in HTML

Apologies for the basic question, forgive my ignorance but I am struggling with keeping two objects in the same line within the same division. Please take a look at the code below: <html> <head> <style> .search-input { width: ...

javascripthtml

Requesting for Nav to be positioned directly below the header, in a fixed manner, with no overlapping

After successfully resolving the issue of my header overlapping content, which was thanks to your help, I encountered a new challenge. I was advised to group my navigation bar with my h1 header for a fixed position but doing so caused everything to go hayw ...

htmlcss

The <img> tag is displaying with dimensions of 0 x 0 pixels even though its size was specified

Is there a way to control the image size within an <img> tag placed inside an html5 video element? Currently, it keeps defaulting back to 0 x 0 pixels. The reason behind using this img is to serve as a fallback for outdated browsers where the video ...

csshtmlimagehtml5-video

Generate several invoices with just a single click using TypeScript

I'm interested in efficiently printing multiple custom HTML invoices with just one click, similar to this example: https://i.sstatic.net/hAQgv.png Although I attempted to achieve this functionality using the following method, it appears to be incorr ...

javascripthtmlcssangulartypescript

Creating a PHP-powered contact form for sending emails

I've been trying to set up a contact form, but I'm struggling to make it work. I downloaded a PHP contact form script, but I can't figure out how to get it functioning. Despite searching extensively on Google and here, I haven't found a ...

phphtmlcontact-form

Ways to verify if a web URL is contained within an HTML textbox

In the process of developing a frontend form for WordPress, I have incorporated a basic HTML textbox for users to input a web URL. My goal now is to ensure that the entered value is indeed a valid URL and not just arbitrary text. Is there a way to perfor ...

phphtmlwordpressforms

What causes the discrepancy between a website's source code and the code viewed in the browser inspection tool? (Regarding web scraping)

This is my first programming project and I apologize in advance for any mistakes in terminology. My Objective: I am currently working on a project to scrape data from my local library's website. My main goal is to automate the process of renewing bo ...

htmlpython-3.xselenium-webdriverweb-scrapingbeautifulsoup

Enhance your webpage's body by zooming in using jQuery on Mozilla Firefox

I have a webpage and I would like to zoom its body when it loads using jQuery. However, the CSS zoom feature is not working in Mozilla Firefox. This is what I currently am using: $("body").css("zoom", "1.05"); It worked in Chrome, Opera, and Edge, but un ...

javascriptjqueryhtmlcss

The images were uploaded, but unfortunately they are not adapting to different screen sizes

I recently created a website that is optimized for tablet screens and included images. However, I noticed an unwanted gap between the first column and third column that needs to be fixed. My plan is to adjust the layout using Bootstrap code or another meth ...

htmlcssbootstrap-5