javascript - 为什么设置框阴影在 Chrome 中不起作用？

Question

这是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>

这是文本框的代码

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

我试图通过在单击文本框时应用另一个 css 使我的文本框具有发光/阴影。此代码在 Firefox 中运行良好，但在 chrome 中没有任何反应。谁能指出原因？

编辑CSS代码

.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

根据这个WebKit's Bug Report #45417 (和 Chromium's downstream one )。您需要设置一个显式 border 作为解决方法以使其工作。

.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;
}