Creating background images in select tag using only CSS

I am interested in achieving the following task

This is a selection drop down form that I need to work on

Here is the code snippet:

HMTL

<select>
                        <option>Country</option>
                        <option>India</option>
                        <option>USA</option>
                    </select>

Css

select{
    width:197px;
    height:45px;
    border:solid 1px #13669b;
    box-shadow:0 5px 2px 0px rgba(0,0,0,0.06) inset;
    background:rgba(256,256,256,0.7);
    color:#13669b;
    font-size:16px;
    font-family: 'LatoBold';
    padding:0 14px;
    line-height:45px;
}

I am looking for a solution using only pure css. Can anyone guide me on how to achieve this? Thank you!

formscss

Answer №1

Creating a dropdown box with pure CSS can be challenging (for now).

To tackle this, consider developing your custom JS/CSS dropdown tool or resort to the numerous existing jQuery/CSS plugins.

Answer №2

Finding a seamless solution for cross-browser compatibility may not be easy, but a combination of CSS and jQuery could potentially work across all browsers:

  • Check out this tutorial on Reinventing a Drop Down with CSS and jQuery

Follow the steps in the tutorial and customize the CSS to achieve the desired look.

Screenshot:

Answer №3

This particular solution utilizes only CSS and is tailored for Chrome compatibility. Take a look at this example:

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;
  background-image: url(../images/select-arrow.png), 
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  color: #555;
  font-size: inherit;
  margin: 0;
  overflow: hidden;
  padding-top: 2px;
  padding-bottom: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

I have not experimented with replacing the -webkit prefix with -moz to make it compatible with Firefox browsers, but it could potentially work as well. Feel free to test it out.

Answer №4

Styling dropdowns can be a challenge due to the different implementations in various browsers. This is particularly evident when comparing dropdowns on mobile devices like iPads and iPhones, which operate differently from desktop applications.

To achieve a customized dropdown, developers often have to create it using lists and JavaScript. Alternatively, they can utilize one of the many libraries designed for this purpose, showcasing that a purely CSS-based solution may not be feasible.

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

Could you assist me in setting up a loop for this Slideshow that times out and then resets back to the beginning?

Currently, I am in the process of developing a slideshow using jQuery. My main struggle lies in creating a loop that will timeout the slideshow for a specific duration, say 10 minutes, before it reappears and resumes indefinitely. Unfortunately, my attempt ...

jqueryhtmlcss

Variety of part ingredients

In my component, I have a button and include another component which also contains a button. How can I align these two buttons next to each other without using absolute positioning? When I try positioning them using absolute right and top values, the lay ...

javascripthtmlcssangularangular2-template

How can I arrange the ng-class based on the clicked item's order?

http://plnkr.co/edit/pUtuZy?p=preview In this scenario, there are three different border classes available: .border1 { border: 1px solid #66FFFF; } .border2 { border: 1px solid #33CCFF; } .border3 { border: 1px solid #0099FF; } The goal is to as ...

javascriptcssangularjsangularjs-ng-clickangularjs-ng-class

Change the x and y positions of several div elements as the mouse moves in JavaScript

I am aiming to create a webpage where multiple divs with text and other content move along the x and y axes of the mouse. The desired effect is similar to parallax scrolling, but I have found that existing parallax plugins are image-based and do not work w ...

javascriptjquerycssmouseeventparallax

Form submission results in req.body.[input name] being undefined

I've reviewed my code thoroughly, but I'm having trouble pinpointing the issue. The goal is to have the form submit to the same page "/admin". To troubleshoot, I set up the app.post("/admin",...) function to console.log the req.body values from t ...

node.jsformsexpresspost

Problem with aligning an image horizontally within a DIV

Can anyone help me align the picture of the planet horizontally in the middle of the DIV section "about us" on my website? I've tried using text-align:center; in the CSS but it doesn't seem to work. Any suggestions would be appreciated. Thank you ...

cssalignment

An easy way to switch animations using CSS display:none

Dealing with some missing gaps here, hoping to connect the dots and figure this out. I'm attempting to create a functionality where a div slides in and out of view each time a button is clicked. Eventually, I want multiple divs to slide out simultane ...

javascriptjquerycss

Utilize the splice function when resizing the window based on specific breakpoints

On a series of div elements, I have implemented some JS/jQuery code that organizes them by wrapping every three elements in a container with the class .each-row. <div class="element"></div> <div class="element"></div> <div class ...

javascriptjqueryhtmlcss

Adjusting the gaps between each item in a list

Currently, I am working on developing a minimalist single-page website. However, I am facing challenges with spacing in the navbar section (as demonstrated below). When using an unordered list, everything looks good until the list overlaps with the centra ...

htmlcssnavbar

Issue with bootstrap 4 CDN not functioning on Windows 7 operating system

No matter what I do, the CDN for Bootstrap 4 just won't cooperate with Windows 7. Oddly enough, it works perfectly fine on Windows 8. Here is the CDN link that I'm using: <!doctype html> <html lang="en> <head> <!-- Req ...

javascriptjquerycssbootstrap-4windows-7

Displaying content on the <div> element

Looking for recommendations for a jQuery plugin or JavaScript solution that allows me to load a full "view" into a <div> when a user clicks on a link. The challenge I'm facing is that I have 8 pages, with the Homepage consisting of 3 divisions: ...

javascriptjqueryhtmlcssasp.net-mvc

Troubleshooting: Font-Face Won't Load on Any Browser

I'm completely new to using @font-face and I'm encountering some issues. Despite going through numerous posts and tutorials, I can't seem to get my fonts to load properly. I've tried activating and deactivating the font on the server, b ...

htmlcsswebfont-face

Unable to view numbers on iPhone or ios device

I am facing an issue with displaying a phone number in the contact section on my website. The number shows up on desktop but not on my iPhone, even when I resize the screen to be smaller than my phone's display size. This issue has been tested on both ...

htmlioscssphone-number

"Incorporate keyframes to create a mouseleave event with a distinctive reverse fade

After posing a similar question a few days back, I find myself encountering yet another hurdle in my project. The task at hand is to switch the background image when hovering over a button with a fade-in effect using @keyframes. However, I'm stuck bec ...

javascripthtmlcss

Extracting textual information from Wikipedia through iframes?

Currently, I am working on a website project utilizing Squarespace. This site will feature multiple pages dedicated to individuals who have reached a level of notability worthy of having their own Wikipedia page. With over 150 pages planned, manually writi ...

javascripthtmlcssiframewikipedia

The differences between using the opacity attribute in HTML and the opacity property

There are two distinct methods for adjusting opacity in HTML: <div opacity="0.5"></div> and <div style="opacity: 0.5;"></div> I am familiar with setting these values in JavaScript as well: div.setAttribute("opacity", 0.5); and ...

javascripthtmlcss

Ensure the div element remains fixed at the top of the page

I created a script to identify when I reach the navigation bar div element and then change its CSS to have a fixed position at the top. However, I am encountering an issue where instead of staying fixed, it jumps back to the beginning of the screen and fli ...

javascriptcss

Check the validity of a password using Angular's reactive forms

For my password validation using ng Reactive Forms, I have a basic html input field for the password and warning paragraphs outlining the password requirements. <div class="field"> <label class="label">Password</label ...

angulartypescriptformsfrontendangular-reactive-forms

What is the best way to make a linear gradient that spans the entire vertical space that is visible (or shifts to a solid color)?

I'm trying to figure out how to apply a linear gradient to the body element of my webpage. Here's the CSS code I've been using: body { background: linear-gradient(0deg, white, lightgray); } The issue I'm facing is that the gradien ...

csshtmllinear-gradients

What could be the reason that the div is not being centered in the middle of the body?

<style> .maincont { width: 8em; height: 8em; background: purple; } body { background: limegreen; display: flex; flex-direction: column; place-content: center; place-items: center; } </style> <body> ...

htmlcsscenter