safai chromeでbox-shadowが効かない！
2015年10月16日
wpのcontactform7でformを設置、inpiut枠をbox-shadowで装飾したら
Firefoxでは正常に表示。しかしsafariとchromeが黒いborderになるだけ！
しかしfocusすると反映。なんじゃ？
でググってみるとありました。
1 2 3 4 5 | -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の書き方通りにすれば良いのだった。
1 2 3 4 5 | -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の方のバグらしい。疲れるわ〜！！！
