Tips for displaying an image in the select box using the Google Chrome browser

How can I display the image in a select drop-down box specifically for Google Chrome? The image shows up in all browsers except for Google Chrome.

The image in Google Chrome appears like this...

The image shown in all other browsers looks like this...

I want to create a consistent select box appearance across all browsers.

This is my current code...

.selectbox_bg {
    background: url("images/contact_texbox_bg.png") no-repeat scroll 0 0 transparent !important;
    border: medium none;
    color: #5D5C5C !important;
    font-size: 15px;
    height: 33px;
    line-height: 33px;
    padding: 6px 10px;
    width: 255px;
}

Your assistance is greatly appreciated.

Thank You.

htmlcss

Answer №1

For a different approach, consider placing your background image within the background:url property and then insert the remaining code while adjusting each parameter accordingly.

background:url(choicebox.png) no-repeat !important;
-webkit-appearance: none;
-moz-appearance: none;
border: medium none;
color: #555555 !important;
font-size: 16px;
height: 35px;
line-height: 35px;
padding: 8px 12px;
width: 260px;

Answer №2

To achieve this, utilize CSS styling

select{
    background-color: #FF5733;   
   border-radius: 10px; 
    border: 2px #E84521 solid; 
    padding: 6px;
    width: 180px
}​

VIEW DEMO

Another option could be:

.selectbox_bg {
    background: url("images/custom_box.png");
    background-position: center top;        
    background-repeat: no-repeat;
    background-attachment:scroll;
    background-color:transparent;
    border: none;
    color: #333333 !important;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    padding: 8px 12px;
    width: 275px;
}

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

Angular 6: Implementing a dynamic photo grid using CSS

I am looking to implement a dynamic grid list using Angular 6's *ngFor directive. I have an Array of 105 objects stored in firebase, each with the structure: {src: 'some url', alt: 'title'} These objects consist of two types of p ...

cssangularhtml

How to customize the page background color in Next JS

I am currently working on a project using Next Js and have encountered an issue. I have a global.css file set up in the project, but I need to change the background color of a specific page without affecting the rest of the project. Although I have tried u ...

cssnext.js

Having trouble interacting with Bootstrap modal dialog when fullPage.js is active

Whenever I attempt to click on the button, a Bootstrap modal dialog box appears but remains unresponsive no matter what I try. My project utilizes both Bootstrap and fullPage.js http://codepen.io/anon/pen/obEOzO <body> <div id="fullpage"> &l ...

javascriptjquerycsstwitter-bootstrapfullpage.js

Establishing connection to the database

I am in the process of developing a small-scale project on creating Universal Identification Numbers, similar to that of college level projects. My goal is to design a page with tabs for different databases, so that when I press the key 'A' for a ...

phpmysqlhtml

Decoding JSON with HTML in c#

While serializing an object into JSON that contains HTML, I encountered a unique issue. Below is the structure of my class: [Serializable] public class ProductImportModel { public string ProductName { get; set; } public string ShortDescription { get; ...

c#htmljsonentity-frameworkserialization

Using the 'onended' audio event emitter in Angular 2 along with a local member of the Component

I'm looking for assistance on how to utilize audio.onended() in order to play the next song in a playlist. I can successfully add songs to the playlist and play them using the above method with an audioObject. However, when audio.onended triggers, I ...

javascripthtmlangularaudio

Reposition a div using jQuery when window is resized

I'm currently facing a challenge with the web project I am working on for my company. The code snippet I have looks like this: //CSS .home-panel{ z-index: 0; width: 1800px; height: 2100px; background: gray; transform: skew(0deg,-55deg) ...

javascriptcsshtmlresponsive

Can two JavaScript functions be called in an onclick event?

<a href="#" type="image" class="topopup" onclick="ShowDIV3();" >Click Here</a> I am looking for assistance with executing an additional function, such as validation. The next function should only run if the validation function returns true. ...

javascripthtmljqueryjquery-events

Challenges arise when delivering audio files in MVC3 | Implementing diverse HTML5 media players

I'm facing a challenge with creating a component for an application that plays audio files primarily in .mp3 and .wav format. After testing, the component works fine in Chrome, but I encounter issues when using IE9, which is the browser of concern. T ...

c#.netasp.net-mvc-3htmlaudio

Place a div with a background image on top of another image in the content

I have a challenge where I need to hide an image or i tag within a wrapper div if there is a background image present. The idea is that the icon inside the wrapper div should only be visible when there is no background image, and as soon as a background im ...

htmlcssflexboxtwitter-bootstrap-4

Encountering Error 404 1668 in CMD preventing connection to my CSS file within my HTML document

In the base.html file, my script is focused on the tree depicted in the image. I have verified that the href is correct and have loaded static at the very top of the HTML file. Despite this, I am still unable to connect the CSS file. Can anyone provide ass ...

pythonhtmlcssdjango

Sharing and soliciting information from online sites

My system is designed to capture and store every member's IP address, browser, and operating system details. I am interested in integrating this. Is there a method to automatically send the user's IP to their website, retrieve information like ...

phphtmlcurl

The application of position "absolute" to center content is ineffective

When I have an h1 element with position "absolute" inside a div with position "relative", setting h1's top:50% and left:50% places it in the middle of the viewport instead of the parent div. It seems that the nearest parent is being ignored for some r ...

htmlcsspositioningabsolute

Is there a way to extract information from my JSON file and display it on my website?

My aim is to populate my HTML page with data from a JSON file. Approach I created a JavaScript file: update-info.js In this file, I used an AJAX call to retrieve data from my JSON file data.json If the request is successful, I utilized jQuery's .htm ...

javascriptjqueryhtmlajaxjson

What is the best way to modify the selection text background with CSS?

Does anyone know the method for modifying the selection text background in CSS? Many modern websites opt for a personalized background color instead of the traditional blue? ...

htmlcss

Items that share identical height and margin values will appear with divergent visual presentations

I am trying to align three horizontal lines so that they are the same height and have an equal spacing between each other. However, due to variations in height and margins, some lines appear larger or smaller than others. How can I ensure they all have th ...

htmlcss

Images flicker as they transition, intervals are causing havoc

I am creating a random fade effect for images within a specific container. Below is the HTML code for the container: <div id="container" class="container"> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg" /> &l ...

javascriptjqueryhtml

Tips for creating an HTML report using Python

Currently, I am searching for a solution to convert my saved matplotlib graphs as png files along with some data frames into HTML format. This is similar to how I typically use R2HTML in R. Despite my efforts, I have not been able to locate clear informat ...

pythonhtmlrplotreport

Updating the background of the page dynamically using VueJS

Currently, I am working on developing a form creation feature that allows users to select a background color for their forms. This selection would then reflect as the background color of the body tag. Users are given several color options to choose from, a ...

javascripthtmlcsslaravelvue.js

What is the best way to connect the control in a Datalist with a fresh value?

When trying to play a video using HTML5 controls, I encountered an issue. The video was saved in the database with the path "~/res/Files/test.ogv" and it wasn't playing properly due to the presence of "~/". I wrote some code to remove t ...

asp.nethtmlvideo