Applying shadow on DIV and it's getting bg-color too
Hi, everybody.
Here is the thing:
I have a DIV with a DROPDOWNLIST inside and my idea is when the dropdownlist is with focus, the DIV gets a shadow. When it looses focus, the DIV looses the shadow.
My code is working almost fine. I'm using javascript to change the class of the DIV and it's getting the shadow just like I want.
The problem is that it gets the shadow and a background-color. I have no idea why is this happening since I don't change the background-color on any moment.
* The bg-color is gray, which makes me belive the problem is in the shadow...
Here's the code:
HTML
Code:
<div id="cbo" class="form_cbodiv">
<asp:DropDownList ID="cbo_ed" runat="server" onFocus="javascript:changeClassDiv(true);" onBlur="javascript:changeClassDiv(false);">
<asp:ListItem Text="Field1" Value="1"></asp:ListItem>
<asp:ListItem Text="Field2" Value="2" Selected="True"></asp:ListItem>
</asp:DropDownList>
</div>
CSS
Code:
.form_cbodiv
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 3px solid #efefef;
height: 27px;
width: 151px;
position: relative;
behavior: url(PIE.htc);
}
.form_cbodiv_focus /*compra.aspx*/
{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px 1px #cacaca;
-moz-box-shadow: 2px 2px 3px 1px #cacaca;
box-shadow: 2px 2px 3px 1px #cacaca;
border: 3px solid #efefef;
height: 27px;
width: 151px;
position: relative;
behavior: url(PIE.htc);
}
Javascript to change the class style
Code:
function changeClassDiv(foco) {
if (foco) {
document.getElementById('cbo').className = 'form_cbodiv_focus';
} else {
document.getElementById('cbo').className = 'form_cbodiv';
}
}
Thanks for the support.
Forums
