JSFiddle - React, Tailwind, and code Playground

by cfarm

HTML

<div>
The background image and box shadow are both applied to the same div. The background image and box shadow are both applied to the same div.
The background image and box shadow are both applied to the same div.
The background image and box shadow are both applied to the same div.
The background image and box shadow are both applied to the same div.
But the box shadow is on top of the image.
</div>
<br />
<br />
<select name="state" id="vAccountAddress-fields-state-1">
                <option value="">[Select a State]</option>
                
                        <optgroup label="U.S. States">
                            
                                    <option value="AL">
                                        Alabama
                                    </option>
                                
                                    <option value="AK">
                                        Alaska
                                    </option>
                                
                                    <option value="AZ">
                                        Arizona
                                    </option>
                                
                                    <option value="AR">
                                        Arkansas
                                    </option>
                                
                                    <option value="CA">
                                        California
                                    </option>
                                
                                    <option value="CO">
                                        Colorado
                                    </option>
                                
                                    <option value="CT">
                                        Connecticut
                                    </option>
                                
                                    <option value="DE">
              ...

CSS

div {
    width: 50%;
    height: auto;
    border: 1px solid #A4A4A6;
border-color: #8C8C8C #A4A4A6 #A4A4A6 #8C8C8C;
box-shadow: 2px 6px 5px #F4F4F4 inset;
-webkit-box-shadow: 2px 6px 5px #F4F4F4 inset;
-moz-box-shadow: 2px 6px 5px #f4f4f4 inset;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-image: url(http://cfarman.com/wp-content/uploads/2012/08/bg_select_arrows.png);
background-position: top right;
background-repeat: no-repeat;
}

select {
padding: 0;
height: 20px;
-webkit-appearance: none;
height: 20px;
color: #808285;
border: 1px solid #A4A4A6;
border-color: #8C8C8C #A4A4A6 #A4A4A6 #8C8C8C;
box-shadow: 2px 6px 5px #F4F4F4 inset;
-webkit-box-shadow: 2px 6px 5px #F4F4F4 inset;
-moz-box-shadow: 2px 6px 5px #f4f4f4 inset;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-image: url(http://cfarman.com/wp-content/uploads/2012/08/bg_select_arrows.png);
background-position: top right;
background-repeat: no-repeat;
clip: rect(-10px, -10px, auto, auto);
}