safai chromeでbox-shadowが効かない！

wpのcontactform7でformを設置、inpiut枠をbox-shadowで装飾したら
Firefoxでは正常に表示。しかしsafariとchromeが黒いborderになるだけ！
しかしfocusすると反映。なんじゃ？
でググってみるとありました。

　　　
-moz-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);　
-webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-ms-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);
-o-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.1);

↑これはfocus前のinput枠。でなにが解決策かというと
focusの書き方通りにすれば良いのだった。

-webkit-box-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
-moz-box-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
-ms-box-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
-o-box-shadow: 0 0 8px rgba(100, 200, 255, 0.5);
border-color: rgba(100, 200, 255, 0.75) !important;

つまり-webkit-が-moz-より先にないとダメ〜、そしてさらに
border-color: rgba(100, 200, 255, 0.75) !important;
がないとダメなんだな。

safari chromeの方のバグらしい。疲れるわ〜！！！