javascript - 为什么在 Chrome 中设置 box-shadow 不起作用？

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 的错误报告 #45417（和Chromium 的下游一个）。您需要将显式 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;
}