Preventing hover background from replacing previous background image

[Lucy]

I have a dropdown menu which I have styled in such a way that the default arrow is hidden and I have put in my own as a background image. I have a background colour on hover and when the box is selected. The problem is, this background is replacing the arrow image instead of going underneath as I hoped it would. Is there a solution to this? I've tried a few things but nothing has worked. Code is below, attaching images to show you what I mean.

 

CSS:

input	, select			{		border:.1rem #1F3049 solid;		background:inherit;		padding:.3rem;		-webkit-transition:1s;		-moz-transition:1s;		transition:1s;	}input:hover, select:hover, input:focus, select:focus			{		 background:#D19292;		 -webkit-transition:1s;		 -moz-transition:1s;		transition:1s;	}#catwrapper			{		margin:0 0 0 25%;		width:44%;		border:.1rem #1F3049 solid;		background:url('images/darrow.png') no-repeat 95% 70%;	}#category			{		overflow:hidden;		width:100%;	}#category select			{		color:#05285B;		font-family:inherit;		font-size:1.5rem;		border:none;		width:115%;	}

HTML:

<div id="catwrapper">		<form id="category">		<select name="category" required>		<option selected="selected" disabled="disabled">choose a category</option>		<option value="breakfast">breakfast</option>		<option value="lunches">lunch</option>		<option value="dinners">dinners</option>		<option value="dessert">dessert</option>		</select>		</form></div>

 

 

[dsonesuk]

The e;lement containing background image needs to be at a higher layer level or equal than the element whose background color changes.

possible solution

        <style type="text/css">            input, select, select + #select_bg	{                border:.1rem #1F3049 solid;                background:inherit;                padding:.3rem;                -webkit-transition:1s;                -moz-transition:1s;                transition:1s;            }            input:hover, select:hover + #select_bg, input:focus, select:focus + #select_bg			{                background:#D19292;                -webkit-transition:1s;                -moz-transition:1s;                transition:1s;            }            #catwrapper			{                margin:0 0 0 25%;                width:44%;                border:.1rem #1F3049 solid;                position:relative;            }            #catwrapper #select_bg {                background-image:url('user.png');                background-repeat:no-repeat;                background-position: 95% 70%;                position: absolute;                top:0;                left:0;                bottom:0;                right:0;                z-index:0;            }            #category			{                overflow:hidden;                width:100%;                position: relative;                z-index: 10;            }            #category select			{                color:#05285B;                font-family:inherit;                font-size:1.5rem;                border:none;                width:115%;                position:relative;                z-index: 10;            }        </style>        <div id="catwrapper">            <form id="category">                <select name="category" required>                    <option selected="selected" disabled="disabled">choose a category</option>                    <option value="breakfast">breakfast</option>                    <option value="lunches">lunch</option>                    <option value="dinners">dinners</option>                    <option value="dessert">dessert</option>                </select><div id="select_bg"></div>            </form>        </div>

Edited November 18, 2014 by dsonesuk

[Lucy]

Thanks for the reply. Unfortunately, that doesn't seem to work :/

 

Weird thing is, the z-index thing isn't working as it should. Despite giving #category select a lower z-index number than #catwrapper, it regardless stays on top (I discovered this when changing the background for #category select to a colour from inherit, which makes it cover up the arrow). Can't understand why this is happening...

[dsonesuk]

Did you change image to yours?, and z-index only works if the element it is targeting uses position: (other than static); it works fine for me.

[Lucy]

Sorry, I made a mistake when adding in the image name - it does work. Thanks!

[Lucy]

Also, do you know why it is that the hover colour is not applied if the background for #catwrapper #select_bg is written in shorthand?