Is it possible to set an image as the background for a select/drop-down menu? I've tried using the following CSS, which works in Firefox and IE but not in Chrome:
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
select
{
-webkit-appearance: none;
}
If necessary, you can also incorporate an arrow image into the background.
Arne's point is clear - achieving consistent style for select boxes across different browsers is a challenge.
For a solution, check out Uniform: https://github.com/pixelmatrix/uniform. This javascript tool provides excellent graphic control over form elements, making it one of the best options available for tackling this issue.
Traditionally, it is frowned upon to customize standard form controls due to the inconsistency in appearance across various web browsers. You can find some examples of this issue here: .
However, one approach that has shown some success is setting the background color using an RGBA value:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #d00;
}
select {
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<select>
<option>Foo</option>
<option>Bar</option>
<option>Something longer</option>
</body>
</html>
In Google Chrome, a gradient effect may still appear over the background image when using rgba(r,g,b,0.1). To minimize this, choose a color that complements your image and set the alpha channel to 0.1.
To achieve a consistent look across browsers, you can implement the following CSS styles. However, there is a special consideration for Firefox 30:
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
Update
If you need to style select elements specifically for Firefox 30, you can utilize the :-moz-any() CSS pseudo class as a clever workaround.
I am facing an issue with removing padding from a button that has an image inside it. I have tried using style="padding: 0px !important" and the p-0 class, but it doesn't seem to work. Switching the <button> to <a> removes the padding, but ...
I am facing an issue where I have a div with the class "outer" containing another div with the class "inner". Upon adding a 2px border to the "outer" div, padding is automatically applied in a way that appears as 1px padding on the top, left, and right sid ...
I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...
Recently, I've been experimenting with creating animations using CSS and jQuery. While it has been successful so far, I'm now looking to take it a step further. Specifically, I want information to appear on top of an image when the user clicks on ...
I've designed a style specifically for printing like this: #content .inner h2 { background: Red; border-bottom: solid 1px #dfdfdf; color: #000000; font-size: 20px; padding-left: 10px; } However, the red color doesn't show up in the print previe ...
I am looking to extract information from an HTML file that contains elements with the class name "link". My challenge is to read each line into a variable and then parse it, all while using triple quotation marks. How can I create a string variable that ad ...
There seems to be some clipping on the scrollbar and border of the textarea: <!DOCTYPE html> <html> <head> <meta charset="UTF-8> <title>Scrollbar and Border Clipping Issue in Webkit</title> <style> ...
Is it possible to place a dropdown arrow inside a select box? I have tried, but the arrow always displays behind the select box. How can I modify the CSS code to position the arrow properly inside the select box? .form-item-custom-search-types::before { ...
Having a bit of trouble trying to adjust the position of a button inside an input field using bootstrap. The button appears centered within the form field, but I need it to be slightly shifted to the right for design consistency. https://i.stack.imgur.com ...
Below is the Bootstrap code that defines our main menu navigation: <div class="col-xl-9 col-lg-9"> <div class="main-menu d-none d-lg-block"> <nav> ...
In my chat application, I have a functionality where replies on a chat are initially hidden and represented by a count in a red box. When the user clicks on the red button, the replies from other users are revealed along with an input box for writing a r ...
In need to style four buttons in a consistent way, but each one should have its own unique image. Three styles are required: one for normal state, and the others for hover and focused states. Using CSS for this task would involve a lot of repetition, as ...
In order to ensure that certain elements on my page do not exceed specific widths, it is crucial for me to use a monospaced font. This will limit the horizontal "stride" between characters to stay within a specified threshold. However, simply setting the ...
Check out this code snippet! I'm new to coding, so let me know if you see any errors or ways it could be improved. button { font-size: 10px; font-family: roboto, Arial; color: white; background-color: rgb(59, 102, 241); border-radius: 100p ...
I am working with a flexbox layout that currently looks like this: https://i.stack.imgur.com/ULHEk.jpg My main question now is whether there is a way to disrupt the flow externally from the flexbox, so that the blocked element can move to the next positi ...
Currently working on some code that involves a flex container. Struggling to prevent fields from shrinking too much on smaller screen sizes. var crsdesc; //var for new window function popup(mylink) { if (!window.focus) return true; var href; if (t ...
I'm looking to create a responsive layout similar to the design of duckduckgo.com. This page features a logo, the DuckDuckGo brand name in text form, and a search box. When I reduce the width of the browser window to nearly horizontal bar size, the th ...
I've been working tirelessly on solving this issue for the past week, but unfortunately, I haven't had any luck finding a solution. The problem arose as I was designing a launch page for a program that my friend is developing. Despite setting the ...
I am trying to display content in an iframe using Fancybox, but I am encountering an issue. Despite all the content being contained within the iframe, horizontal and vertical scroll bars are appearing. When inspecting the element in Firefox, I noticed th ...
Trying to build a Nuxt SSR app, but encountering an error related to the css-loader during the build command execution. The issue seems to be with Invalid options object. ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./no ...