JSFiddle - React, Tailwind, and code Playground

by glsee

HTML

<select id="test">
    <option>blub</option>
    <option>bdsfsdf</option>
    <option>blubsdfdsf</option>
</select><br/><br/>
<input/><br/><br/>
<input type="password"/><br/><br/>
<input type="submit"/><br/><br/>
<button>Click to Fake <code>box-shadow</code> for <code>&lt;select&gt;</code></button>

CSS

select, input, button{
    -webkit-box-shadow: 0px 0px 15px #FFCCCC;
    -moz-box-shadow: 0px 0px 15px #FFCCCC;
    box-shadow: 0px 0px 15px #FFCCCC;
    border: 1px solid #B30000;
}

select {
    width: 200px;
}

JavaScript

function selectShadow(){
    $('select').each(function(){
        var self = $(this);

        var $shadow = $('<div>', {
            css: {
                'position': 'absolute',
                'left':     self.offset().left,
                'top':      self.offset().top,
                'width':    self.outerWidth(),
                'height':   self.outerHeight(),
                '-webkit-box-shadow': '0px 0px 15px #FFCCCC',
                '-moz-box-shadow': '0px 0px 15px #FFCCCC',
                'box-shadow': '0px 0px 15px #FFCCCC',
                'z-index':  -1
            }
        }).appendTo(self.parent());
    });
}

$('button').bind('click', function(){
    selectShadow();
});