Question

This is the javascript

 <script type="text/javascript">
 function Change(obj, evt)
 {
    if(evt.type=="focus")
        obj.className ="textboxOnClickStyle";

    else if(evt.type=="blur")
       obj.className ="textboxStyle";
 }
 </script>

this is the code for the Textbox

<asp:TextBox  ID="txtFirstName" runat="server" CssClass="textboxStyle" onfocus
 ="Change(this, event)" onblur ="Change(this, event)" CausesValidation="True"> 
</asp:TextBox>

I am trying to make my textbox having glow/shadow by applying another css when the text box is clicked. This code works fine in Firefox but in chrome nothing happens. Can anyone point out why?

Edit
CSS code

.textboxStyle
 {
border-color: #9ECAED;
 border-radius: 3px 3px 3px 3px;


  }

 .textboxOnClickStyle
 {
-moz-box-shadow: 0 0 10px 1px #6DC421;
    -webkit-box-shadow: 0 0 10px 1px #6DC421;
     box-shadow: 0 0 10px 1px #6DC421;

  }

Answer 1

According to this WebKit’s Bug Report #45417 (and Chromium’s downstream one). You need to set an explicit border as a workaround to make it work.

.textboxOnClickStyle {
  -moz-box-shadow: 0 0 10px 1px #6DC421;
  -webkit-box-shadow: 0 0 10px 1px #6DC421;
  box-shadow: 0 0 10px 1px #6DC421;
  border: none;
}